/* ==========================================
   CSS VARIABLES & THEME COLORS
   ========================================== */

:root {
    --bg: #faf8f5;
    --fg: #2563eb;
}

/* All themes use the same colors - consolidated to avoid duplication */
body[class^="theme-"] {
    --bg: #e8f4f8;
    --fg: #1a5f7a;
}

/* ==========================================
   ACCESSIBILITY
   ========================================== */

.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--fg);
    color: var(--bg);
    padding: 10px 20px;
    text-decoration: none;
    z-index: 100000;
    font-weight: 600;
}

.skip-link:focus {
    top: 0;
}

/* ==========================================
   GLOBAL STYLES
   ========================================== */

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

/* Reset nav element default styles */
nav {
    margin: 0;
    padding: 0;
    display: block;
}

body {
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.5px;
    color: var(--fg);
    background-color: var(--bg);
    background-image: radial-gradient(circle, color-mix(in srgb, var(--fg) 8%, transparent) 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: 0 0;
    text-transform: lowercase;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
}

/* ==========================================
   HEADER & NAVIGATION
   ========================================== */

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
    padding-bottom: 20px;
}

.header-inner {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
}

.nav-tabs {
    display: flex;
    gap: 32px;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.tab-button {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 12px 24px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    color: var(--fg);
    letter-spacing: 0.5px;
    opacity: 0.6;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tab-button:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

.tab-button.active {
    opacity: 1;
    font-weight: 600;
    transform: translateY(0);
}

.logo-tab {
    margin-right: auto;
    padding-left: 0 !important;
    padding-right: 0;
}

.nav-group {
    display: flex;
    gap: 16px;
    align-items: center;
    margin: 0;
    padding: 0;
}

.nav-group .tab-button {
    padding: 12px 0;
}

/* Mobile Menu Button */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    transition: background 0.2s ease;
}

.mobile-menu-btn:hover {
    background: color-mix(in srgb, var(--fg) 8%, transparent);
}

.menu-icon {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--fg);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 2px;
}

.menu-icon::before,
.menu-icon::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 2px;
    background: var(--fg);
    left: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 2px;
}

.menu-icon::before {
    top: -7px;
}

.menu-icon::after {
    top: 7px;
}

.mobile-menu-btn.active .menu-icon {
    background: transparent;
}

.mobile-menu-btn.active .menu-icon::before {
    transform: rotate(45deg);
    top: 0;
}

.mobile-menu-btn.active .menu-icon::after {
    transform: rotate(-45deg);
    top: 0;
}

/* Mobile Drawer Backdrop */
.drawer-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 998;
    pointer-events: none;
}

.drawer-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

/* Mobile Drawer */
.mobile-drawer {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 70%;
    max-width: 300px;
    background: var(--bg);
    padding: 60px 30px 30px 30px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 999;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    overflow-y: auto;
}

.mobile-drawer.active {
    transform: translateX(0);
}

.mobile-tab {
    display: block;
    width: 100%;
    text-align: left;
    padding: 16px 20px !important;
    margin-bottom: 8px;
    border-radius: 6px;
    font-size: 16px;
    transition: all 0.2s ease;
}

.mobile-tab:hover {
    background: color-mix(in srgb, var(--fg) 8%, transparent);
    transform: translateX(-4px);
}

.mobile-tab.active {
    background: color-mix(in srgb, var(--fg) 12%, transparent);
    font-weight: 600;
}

/* ==========================================
   MAIN CONTENT AREA
   ========================================== */

.main-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 0;
}

.tab-content {
    width: 100%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.content-section {
    display: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    flex: 1;
}

.content-section.active {
    display: flex;
    flex-direction: column;
    animation: fadeInUp 0.4s ease forwards;
    min-height: 0;
    /* Allow flex shrinking */
    overflow: visible;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================
   HOME PAGE STYLES
   ========================================== */

.about-content {
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 80px;
    /* Global footer spacing */
    width: 100%;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 0;
}

#guestbook .about-content {
    padding-bottom: 0;
}

#changelog .about-content {
    padding-bottom: 0;
    margin-bottom: 0;
}

#changelog .about-text {
    margin-bottom: 0;
}

/* Draw page specific fixes - do not affect guestbook page */
/* Prevent flex expansion chain on draw page */
body.is-draw-page .container {
    flex: 0 0 auto;
}

body.is-draw-page .main-content {
    flex: 0 0 auto;
}

body.is-draw-page .tab-content {
    flex: 0 0 auto;
}

#guestbook.is-drawing-mode.content-section.active {
    flex: 0 0 auto;
}

#guestbook.is-drawing-mode .about-content {
    flex: 0 0 auto;
}

.about-text {
    max-width: 600px;
    margin: 0 auto;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    text-align: left;
    width: 100%;
}

/* HOF page specific styling to match home page */
#halloffame .about-content {
    max-width: 800px;
    margin: 0 auto;
}

.hof-text {
    max-width: 600px;
    margin: 0 auto;
    padding-top: 0;
    text-align: left;
}

.hof-text p {
    font-size: 14px;
    color: var(--fg);
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 20px;
}

.hof-text p:first-child {
    margin-top: 0;
}

.hof-count {
    font-size: 12px;
    opacity: 0.6;
    margin-bottom: 30px !important;
}

.hof-grid {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
}

#halloffame .about-content {
    padding-top: 0;
    margin-top: 0;
}

.about-text>*:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.about-text p {
    font-size: 14px;
    color: var(--fg);
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 20px;
}

.hello-internet {
    font-weight: 400;
}

.highlight {
    background-color: transparent;
    padding: 2px 4px;
    border-radius: 2px;
    transition: background-color 0.2s ease;
}

.highlight:hover {
    background-color: rgba(147, 197, 253, 0.4);
}

.profile-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 30px 0;
    border-radius: 8px;
    display: block;
    object-fit: cover;
}

.contact-section {
    margin-top: 30px;
}

.contact-section a,
.blog-section {
    margin-top: 30px;
}

.blog-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 12px;
}

.blog-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
}

.blog-item {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--fg);
    border: 1px dashed color-mix(in srgb, var(--fg) 20%, transparent);
    border-radius: 20px;
    padding: 16px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.blog-item:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--fg) 40%, transparent);
    box-shadow: 0 8px 16px color-mix(in srgb, var(--fg) 10%, transparent);
}

.blog-item-icon {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-item-text {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--fg);
    flex: 1;
}

/* ==========================================
   CREATE PAGE STYLES
   ========================================== */

.section-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--fg);
    letter-spacing: 0.5px;
    line-height: 1.4;
    text-align: left;
    margin-top: 0 !important;
    margin-bottom: 20px;
    padding-top: 0 !important;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    margin-top: 0;
    border-top: 1px dashed color-mix(in srgb, var(--fg) 5%, transparent);
    border-bottom: 1px dashed color-mix(in srgb, var(--fg) 5%, transparent);
}

.project-item {
    position: relative;
    padding: 20px;
    font-size: 14px;
    font-weight: 400;
    color: var(--fg);
    letter-spacing: 0.5px;
    text-align: left;
    background-color: transparent;
    border-right: 1px dashed color-mix(in srgb, var(--fg) 5%, transparent);
    border-bottom: 1px dashed color-mix(in srgb, var(--fg) 5%, transparent);
    cursor: pointer;
    transition: all 0.3s ease;
}

.project-item a {
    color: inherit;
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
}

.project-item:nth-child(2n) {
    border-right: none;
}

.project-item:nth-last-child(-n+2) {
    border-bottom: none;
}

.project-item:hover {
    background-color: var(--fg);
    color: var(--bg);
}

.project-item::before {
    content: attr(data-description);
    display: block;
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 15px;
    opacity: 0.8;
}

.project-item::after {
    content: "→";
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    opacity: 0.6;
}

/* ==========================================
   CREATE SECTION STYLES (LIST-BASED)
   ========================================== */

.create-items {
    margin-top: 0;
    margin-bottom: 0;
}

.create-item {
    display: block;
    text-decoration: none;
    color: var(--fg);
    border: 1px dashed color-mix(in srgb, var(--fg) 20%, transparent);
    border-radius: 20px;
    padding: 16px;
    margin-bottom: 12px;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.create-item:last-child {
    margin-bottom: 0;
}

.create-item:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--fg) 40%, transparent);
    box-shadow: 0 8px 16px color-mix(in srgb, var(--fg) 10%, transparent);
}

.create-item .item-link {
    text-decoration: none;
    color: var(--fg);
    display: inline-block;
    margin-bottom: 12px;
}

.create-item .item-link:hover {
    opacity: 0.8;
}

.create-item .item-heading {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 12px 0;
    color: var(--fg);
}

.create-item .item-description {
    font-size: 14px;
    font-weight: 400;
    line-height: 2.0;
    letter-spacing: 0.5px;
    color: var(--fg);
    margin: 0 0 16px 0;
}

.create-item .item-description a.inline-link {
    color: var(--fg);
    text-decoration: underline;
    transition: opacity 0.3s ease;
    position: relative;
    z-index: 10;
    display: inline;
}

.create-item .item-description a.inline-link:hover {
    opacity: 0.7;
}

.create-item .item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 0;
    margin-bottom: 0;
}

.create-item .item-tag {
    display: inline-block;
    padding: 6px 12px;
    background: transparent;
    border: 1px dashed color-mix(in srgb, var(--fg) 20%, transparent);
    color: var(--fg);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.5px;
}

/* ==========================================
   CONSUME PAGE STYLES
   ========================================== */

.consume-title {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--fg);
    letter-spacing: 0.5px;
    line-height: 1.4;
    text-align: left;
    margin-top: 60px !important;
    margin-bottom: 20px;
    padding-top: 0 !important;
}

.consume-items {
    margin-top: 0;
    margin-bottom: 0;
}

.consume-item {
    display: block;
    text-decoration: none;
    color: var(--fg);
    border: 1px dashed color-mix(in srgb, var(--fg) 20%, transparent);
    border-radius: 20px;
    padding: 16px;
    margin-bottom: 12px;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.consume-item:last-child {
    margin-bottom: 0;
}

.consume-item:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--fg) 40%, transparent);
    box-shadow: 0 8px 16px color-mix(in srgb, var(--fg) 10%, transparent);
}

.consume-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.consume-item .item-heading {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--fg);
}

.consume-item .item-date {
    font-size: 12px;
    font-weight: 400;
    color: var(--fg);
    letter-spacing: 0.5px;
    opacity: 0.6;
    flex-shrink: 0;
}

.external-link-icon {
    width: 14px;
    height: 14px;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    color: inherit;
}

.consume-ps {
    margin-top: 0;
}

.consume-ps p {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--fg);
    letter-spacing: 0.5px;
    line-height: 1.5;
    font-style: italic;
}

/* ==========================================
   CHANGELOG PAGE STYLES
   ========================================== */

.changelog-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--fg);
    letter-spacing: 0.5px;
    line-height: 1.4;
    text-align: left;
    margin-top: 0 !important;
    margin-bottom: 12px;
    padding-top: 0 !important;
}

.changelog-list {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-bottom: 0;
}

.changelog-list li {
    margin-bottom: 12px;
    line-height: 1.4em;
}

.changelog-list li:last-child {
    margin-bottom: 0;
}

.changelog-list li:last-child .changelog-entry {
    margin-bottom: 0;
}

.changelog-list li:last-child .changelog-entry-content {
    margin-bottom: 0;
    padding-bottom: 0;
}

.changelog-entry {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    border: 1px dashed color-mix(in srgb, var(--fg) 20%, transparent);
    border-radius: 20px;
    padding: 16px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.changelog-entry:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--fg) 40%, transparent);
    box-shadow: 0 8px 16px color-mix(in srgb, var(--fg) 10%, transparent);
}

.changelog-entry-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.changelog-message {
    color: var(--fg);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    margin: 0 0 12px 0;
}

.changelog-list li:last-child .changelog-message {
    margin-bottom: 0;
}

.changelog-description {
    color: var(--fg);
    font-size: 14px;
    opacity: 0.75;
    line-height: 2.0;
    margin: 0 0 16px 0;
    letter-spacing: 0.5px;
}

.changelog-list a {
    color: var(--fg);
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    display: inline-block;
    transition: opacity 0.3s ease;
}

.changelog-list a:hover {
    opacity: 0.8;
}

.changelog-list small {
    font-size: 12px;
    color: var(--fg);
    opacity: 0.6;
    flex-shrink: 0;
    white-space: nowrap;
}

.changelog-separator {
    height: 0;
    border-top: 1px dashed color-mix(in srgb, var(--fg) 20%, transparent);
    margin: 20px 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.changelog-separator::before,
.changelog-separator::after {
    display: none;
}

/* ==========================================
   GUESTBOOK PAGE STYLES
   ========================================== */

.guestbook-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Drawing Mode */
.drawing-mode {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}

.drawing-mode.active {
    opacity: 1;
    visibility: visible;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Viewing Mode */
.viewing-mode {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}

.viewing-mode.active {
    opacity: 1;
    visibility: visible;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-bottom: 0;
}

.canvas-header {
    text-align: left;
    margin-bottom: 20px;
}

/* MS Paint-style Layout */
.paint-layout {
    display: flex;
    align-items: stretch;
    gap: 20px;
    margin-bottom: 20px;
    border: 1px dashed color-mix(in srgb, var(--fg) 20%, transparent);
    border-radius: 20px;
    padding: 16px;
}

.canvas-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--fg);
    margin-bottom: 10px;
}

.canvas-info {
    font-size: 14px;
    color: var(--fg);
    opacity: 0.7;
    letter-spacing: 0.5px;
}

/* Tools Sidebar (like MS Paint) */
.tools-sidebar {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 12px;
    background: transparent;
    border: 1px dashed color-mix(in srgb, var(--fg) 20%, transparent);
    border-radius: 20px;
    width: 85px;
    flex-shrink: 0;
}

/* Canvas Area */
.canvas-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
    min-height: 0;
}

.canvas-wrapper {
    position: relative;
    width: 100%;
    max-width: 500px;
    display: flex;
    align-items: stretch;
}

#drawingCanvas {
    width: 100%;
    border: 1px dashed color-mix(in srgb, var(--fg) 20%, transparent);
    border-radius: 20px;
    cursor: crosshair;
    display: block;
    background: white;
    touch-action: none;
}

/* Colors in sidebar - 2 columns side by side */
.tools-sidebar .colors {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.tools-sidebar .tool-group.sizes {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
}

.color-option {
    width: 26px;
    height: 26px;
    border-radius: 5px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.color-option:hover {
    transform: scale(1.05);
}

.color-option.active {
    border: 3px solid var(--fg);
    box-shadow: 0 0 0 1px var(--bg), 0 0 0 4px var(--fg);
}

.size-option {
    padding: 8px;
    background: white;
    border: none;
    color: var(--fg);
    font-family: inherit;
    font-size: 16px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
    text-align: center;
    min-width: 36px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-btn {
    font-size: 18px;
    line-height: 1;
}

/* Size icons - circles of different sizes */
.size-icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.size-icon::before {
    content: '';
    background: var(--fg);
    border-radius: 50%;
    display: block;
}

.size-thin::before {
    width: 6px;
    height: 6px;
}

.size-medium::before {
    width: 10px;
    height: 10px;
}

.size-thick::before {
    width: 14px;
    height: 14px;
}

.size-option.active .size-icon::before {
    background: white;
}

.size-option:hover .size-icon::before {
    background: var(--bg);
}

.size-option:hover {
    background: color-mix(in srgb, var(--fg) 10%, transparent);
}

.size-option.active {
    background: var(--fg);
}

/* Canvas Actions (overlay buttons) */
.canvas-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 8px;
    z-index: 10;
}

.canvas-action-btn {
    padding: 6px 12px;
    background: color-mix(in srgb, var(--fg) 8%, transparent);
    border: none;
    color: var(--fg);
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
    white-space: nowrap;
}

.canvas-action-btn:hover {
    background: color-mix(in srgb, var(--fg) 15%, transparent);
}

/* Submission Form */
.submission-form {
    max-width: 600px;
    margin: 0 0 20px 0;
    padding: 16px;
    background: transparent;
    border: 1px dashed color-mix(in srgb, var(--fg) 20%, transparent);
    border-radius: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 5px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 12px;
    color: var(--fg);
    margin-bottom: 8px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.input-with-validation {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-validation input {
    flex: 1;
    padding-right: 40px;
}

.validation-icon {
    position: absolute;
    right: 12px;
    font-size: 18px;
    pointer-events: none;
}

.validation-icon.valid {
    color: #00ff00;
}

.validation-icon.invalid {
    color: #ff0000;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    background: white;
    border: 1px dashed color-mix(in srgb, var(--fg) 20%, transparent);
    border-radius: 20px;
    font-family: inherit;
    font-size: 14px;
    color: var(--fg);
    letter-spacing: 0.5px;
    transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--fg) 40%, transparent);
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.form-note {
    font-size: 11px;
    color: var(--fg);
    opacity: 0.6;
    margin-top: 0;
    margin-bottom: 8px;
    font-style: italic;
}

.char-count {
    text-align: right;
    font-size: 11px;
    color: var(--fg);
    opacity: 0.6;
    margin-top: 4px;
}

.submit-button {
    width: 100%;
    padding: 14px;
    background: var(--fg);
    color: var(--bg);
    border: 1px dashed color-mix(in srgb, var(--fg) 20%, transparent);
    border-radius: 20px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.submit-button:hover {
    border-color: color-mix(in srgb, var(--fg) 40%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px color-mix(in srgb, var(--fg) 10%, transparent);
}

.form-error {
    margin-top: 10px;
    font-size: 12px;
    color: #ff0000;
    text-align: center;
}

.form-error.validation-message {
    color: #4A90E2;
}

/* Mystery Alias Section */
.mystery-alias-section {
    margin: 15px 0 20px 0;
    padding: 0;
    display: none;
}

.mystery-alias-section.visible {
    display: block;
}

.mystery-text {
    font-size: 13px;
    line-height: 1.6;
    color: var(--fg);
    margin-bottom: 5px;
}

.mystery-alias {
    font-weight: 600;
    color: var(--fg);
}

.dice-btn {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    vertical-align: middle;
    opacity: 0.7;
    transition: opacity 0.2s ease;
    display: inline-block;
}

.dice-btn:hover {
    opacity: 1;
}

.dice-btn.rolling {
    animation: dice-roll 0.5s ease;
}

@keyframes dice-roll {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.mystery-note {
    font-size: 11px;
    color: color-mix(in srgb, var(--fg) 50%, transparent);
    font-style: italic;
    margin-top: 3px;
}

/* Viewing Mode Header */
.viewing-header {
    margin-bottom: 20px;
}

.viewing-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.viewing-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--fg);
    margin-bottom: 20px;
}

.back-to-canvas-button {
    padding: 8px 16px;
    background: color-mix(in srgb, var(--fg) 15%, transparent);
    color: var(--fg);
    border: 1px dashed color-mix(in srgb, var(--fg) 20%, transparent);
    border-radius: 20px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.back-to-canvas-button:hover {
    background: color-mix(in srgb, var(--fg) 20%, transparent);
    border-color: color-mix(in srgb, var(--fg) 40%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px color-mix(in srgb, var(--fg) 10%, transparent);
}

/* Grid Section */
.grid-section {
    margin-top: 60px;
}

.grid-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.grid-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--fg);
    letter-spacing: 0.5px;
}

.drawing-count {
    font-size: 12px;
    color: var(--fg);
    opacity: 0.6;
    letter-spacing: 0.5px;
}

.drawings-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 30px;
    margin-bottom: 80px;
    margin-top: 30px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.viewing-mode .drawings-grid {
    margin-bottom: 0;
    padding-bottom: 0;
}

.grid-item {
    aspect-ratio: 1;
    position: relative;
    background: #EDF7FC;
    padding: 14px 14px 50px 14px;
    border: none;
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    z-index: 1;
}

/* Add subtle random rotation to some frames for natural polaroid scatter look */
.grid-item:nth-child(2n) {
    transform: rotate(4deg);
}

.grid-item:nth-child(3n) {
    transform: rotate(-5deg);
}

.grid-item:nth-child(4n) {
    transform: rotate(3deg);
}

.grid-item:nth-child(5n) {
    transform: rotate(-4deg);
}

.grid-item:nth-child(7n) {
    transform: rotate(6deg);
}

/* Push pin on top of polaroid */
.grid-item::before {
    content: '';
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 35px;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='50' viewBox='0 0 40 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.7737 18.859C25.5514 20.2044 27.6671 22.1975 28.8531 24.3081C30.0398 26.4205 30.2758 28.6045 29.4041 30.4041C28.5324 32.2037 26.6724 33.3725 24.2792 33.7509C21.8879 34.1288 19.0124 33.7042 16.2348 32.3588C13.4572 31.0134 11.3414 29.0203 10.1555 26.9097C8.96874 24.7973 8.73279 22.6133 9.60449 20.8137C10.4762 19.0141 12.3361 17.8453 14.7293 17.4669C17.1206 17.089 19.9961 17.5136 22.7737 18.859Z' fill='%23282828' stroke='black'/%3E%3Cellipse cx='16.3544' cy='24.0832' rx='7' ry='6' transform='rotate(25.8444 16.3544 24.0832)' fill='%23B7B7B7'/%3E%3Cmask id='path-3-inside-1_109_10' fill='white'%3E%3Cpath d='M24.3609 28.3272L24.31 28.3025C23.2803 29.5539 20.6902 29.645 18.1965 28.4371C15.7027 27.2292 14.1685 25.1404 14.5121 23.5567L14.4611 23.532L18.9137 14.3397L28.8134 19.1349L24.3609 28.3272Z'/%3E%3C/mask%3E%3Cpath d='M24.3609 28.3272L24.31 28.3025C23.2803 29.5539 20.6902 29.645 18.1965 28.4371C15.7027 27.2292 14.1685 25.1404 14.5121 23.5567L14.4611 23.532L18.9137 14.3397L28.8134 19.1349L24.3609 28.3272Z' fill='%23282828'/%3E%3Cpath d='M24.3609 28.3272L23.925 29.2272L24.825 29.6631L25.2609 28.7632L24.3609 28.3272ZM24.31 28.3025L24.7459 27.4026L24.0377 27.0595L23.5377 27.6672L24.31 28.3025ZM14.5121 23.5567L15.4894 23.7687L15.6562 22.9997L14.948 22.6567L14.5121 23.5567ZM14.4611 23.532L13.5612 23.0961L13.1252 23.9961L14.0252 24.432L14.4611 23.532ZM18.9137 14.3397L19.3496 13.4397L18.4496 13.0038L18.0137 13.9038L18.9137 14.3397ZM28.8134 19.1349L29.7134 19.5709L30.1494 18.6709L29.2494 18.235L28.8134 19.1349ZM24.3609 28.3272L24.7969 27.4272L24.7459 27.4026L24.31 28.3025L23.874 29.2025L23.925 29.2272L24.3609 28.3272ZM24.31 28.3025L23.5377 27.6672C23.2779 27.983 22.7083 28.2682 21.7764 28.2924C20.8692 28.3159 19.7558 28.0813 18.6324 27.5371L18.1965 28.4371L17.7606 29.3371C19.1309 30.0008 20.5594 30.3246 21.8282 30.2917C23.0722 30.2595 24.3124 29.8734 25.0822 28.9379L24.31 28.3025ZM18.1965 28.4371L18.6324 27.5371C17.509 26.9929 16.6346 26.2648 16.0907 25.5384C15.532 24.7922 15.4026 24.1685 15.4894 23.7687L14.5121 23.5567L13.5349 23.3447C13.278 24.5286 13.7439 25.7411 14.4898 26.7372C15.2506 27.7531 16.3902 28.6733 17.7606 29.3371L18.1965 28.4371ZM14.5121 23.5567L14.948 22.6567L14.8971 22.632L14.4611 23.532L14.0252 24.432L14.0762 24.4567L14.5121 23.5567ZM14.4611 23.532L15.3611 23.9679L19.8136 14.7757L18.9137 14.3397L18.0137 13.9038L13.5612 23.0961L14.4611 23.532ZM18.9137 14.3397L18.4777 15.2397L28.3775 20.0349L28.8134 19.1349L29.2494 18.235L19.3496 13.4397L18.9137 14.3397ZM28.8134 19.1349L27.9135 18.699L23.461 27.8913L24.3609 28.3272L25.2609 28.7632L29.7134 19.5709L28.8134 19.1349Z' fill='black' mask='url(%23path-3-inside-1_109_10)'/%3E%3Crect x='19.3777' y='15.5475' width='2' height='7' transform='rotate(25.8444 19.3777 15.5475)' fill='%23B7B7B7'/%3E%3Cpath d='M29.3126 5.48755C33.891 7.7052 36.0011 12.3248 34.361 15.7108C32.7209 19.0968 27.788 20.3049 23.2097 18.0873C18.6313 15.8696 16.5212 11.2501 18.1613 7.86406C19.8014 4.47807 24.7343 3.2699 29.3126 5.48755Z' fill='%23282828' stroke='black'/%3E%3Cellipse cx='23.5472' cy='9.23349' rx='4' ry='3.5' transform='rotate(25.8444 23.5472 9.23349)' fill='%23B7B7B7'/%3E%3Crect x='14.6669' y='32.1549' width='2' height='13' transform='rotate(25.8444 14.6669 32.1549)' fill='%23DDDADA'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 10;
}

.grid-item:hover {
    transform: translateY(-8px) scale(1.05) rotate(0deg) !important;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);
    z-index: 10;
}

.grid-item-image-wrapper {
    flex: 1;
    width: 100%;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
}

.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.grid-item-handle {
    position: absolute;
    bottom: 12px;
    left: 14px;
    right: 14px;
    font-size: 12px;
    color: #2a2a2a;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0.3px;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 500;
}

/* Hall of Fame Winner Card */
.grid-item.hof-winner {
    transform: rotate(0deg) !important;
    border: 2px solid var(--fg);
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
}

.grid-item.hof-winner:hover {
    border-color: var(--fg);
    box-shadow: 0 6px 30px 0 rgba(0, 0, 0, 0.2);
}

.grid-item.hof-winner .grid-item-handle {
    bottom: 28px;
    font-size: 11px;
}


.hof-rank {
    font-weight: 700;
    opacity: 0.6;
}

.hof-message {
    position: absolute;
    bottom: 16px;
    left: 14px;
    right: 14px;
    font-size: 9px;
    opacity: 0.6;
    line-height: 1.2;
    text-align: center;
    color: #2a2a2a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hof-timestamp {
    position: absolute;
    bottom: 6px;
    left: 14px;
    right: 14px;
    font-size: 8px;
    opacity: 0.4;
    text-align: center;
    color: #2a2a2a;
}

.empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    font-size: 14px;
    color: var(--fg);
    opacity: 0.6;
    letter-spacing: 0.5px;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-content {
    position: relative;
    width: 600px;
    max-width: 90vw;
    background: var(--bg);
    border-radius: 12px;
    padding: 40px;
    overflow: hidden;
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 32px;
    color: var(--fg);
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    opacity: 0.6;
}

.modal-nav {
    position: absolute;
    bottom: 30px;
    background: transparent;
    border: 1px solid var(--fg);
    color: var(--fg);
    font-family: inherit;
    font-size: 14px;
    letter-spacing: 0.5px;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 1002;
}

.modal-nav:hover {
    background: var(--fg);
    color: var(--bg);
}

.modal-nav-prev {
    left: 30px;
}

.modal-nav-next {
    right: 30px;
}

.modal-counter {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: var(--fg);
    opacity: 0.7;
    letter-spacing: 0.5px;
    z-index: 1002;
}

#modalDrawing {
    width: 100%;
    height: 400px;
    object-fit: contain;
    border: 8px solid #EDF7FC;
    border-radius: 8px;
    margin-bottom: 20px;
    background: white;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--fg) 20%, transparent);
}

.modal-info {
    text-align: center;
    padding-bottom: 60px;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.modal-handle {
    font-size: 14px;
    color: var(--fg);
    margin-bottom: 10px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.modal-comment {
    font-size: 14px;
    color: var(--fg);
    margin-bottom: 10px;
    font-style: italic;
    opacity: 0.8;
    letter-spacing: 0.5px;
    min-height: 20px;
}

.modal-date {
    font-size: 12px;
    color: var(--fg);
    opacity: 0.6;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}

.delete-button {
    padding: 10px 20px;
    background: transparent;
    border: 1px solid #ff0000;
    color: #ff0000;
    font-family: inherit;
    font-size: 12px;
    letter-spacing: 0.5px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.delete-button:hover {
    background: #ff0000;
    color: white;
}

/* ==========================================
   FLOATING ICON CLICK EFFECT
   ========================================== */

.floating-icon {
    position: fixed;
    width: 32px;
    height: 32px;
    pointer-events: none;
    z-index: 9999;
    user-select: none;
    animation: float-up 2s ease-out forwards;
}

@keyframes float-up {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0) rotate(0deg);
    }

    10% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }

    100% {
        opacity: 0;
        transform: translate(var(--drift, 0), -200px) scale(0.5) rotate(15deg);
    }
}

/* ==========================================
   FOOTER
   ========================================== */

.footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 600px;
    width: 100%;
    margin: auto auto 0;
    padding-top: 50px;
}

body.theme-guestbook .footer {
    padding-top: 20px;
    margin-bottom: 0;
}

/* Guestbook viewing mode footer */
body.theme-guestbook:not(.is-draw-page) .footer {
    padding-top: 20px;
    margin-bottom: 0;
}

/* Draw page specific footer fixes */
#guestbook.is-drawing-mode ~ .footer,
body.theme-guestbook #guestbook.is-drawing-mode ~ .footer {
    padding-top: 20px;
    margin-bottom: 0;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.footer-left,
.footer-right {
    font-size: 12px;
    color: var(--fg);
    opacity: 0.6;
    font-weight: 400;
}

/* Table Flipping Animation */
.table-flip {
    font-size: 24px;
    line-height: 1;
    color: var(--fg);
    opacity: 0.8;
    flex-shrink: 0;
}

.table-flip span {
    display: inline-block;
}

.flip-arm {
    animation: flip-arm-move 3s linear infinite;
    transform-origin: 25% 25%;
}

.flip-trajectory {
    animation: flip-trajectory 3s linear infinite;
}

.flip-table {
    animation: flip-table-flip 3s linear infinite;
    transform-origin: -33% 50%;
}

@keyframes flip-arm-move {
    from {
        transform: rotate(90deg);
    }

    12.5%,
    to {
        transform: rotate(0deg);
    }
}

@keyframes flip-trajectory {
    from {
        opacity: 0;
    }

    37.5%,
    to {
        opacity: 1;
    }
}

@keyframes flip-table-flip {
    from {
        transform: rotate(-180deg);
    }

    37.5%,
    to {
        transform: rotate(0);
    }
}

/* ==========================================
   RESPONSIVE / MOBILE STYLES
   ========================================== */

@media (max-width: 768px) {
    body {
        font-size: 14px;
    }

    .container {
        padding: 20px 20px;
    }

    /* Header & Navigation */
    .header {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 40px;
        padding-bottom: 15px;
    }

    .header-inner {
        max-width: 100%;
    }

    .nav-tabs {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
    }

    .nav-group {
        display: none;
    }

    /* Forms */
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .mobile-menu-btn {
        display: block;
    }

    .mobile-drawer {
        display: block;
    }

    .drawer-backdrop {
        display: block;
    }

    .logo-tab {
        margin-right: 0;
        padding: 8px 0 !important;
    }

    /* Home Page */
    .about-content {
        padding: 0 0 80px 0;
        /* Global footer spacing */
    }

    .about-text {
        max-width: 100%;
        padding: 0;
    }

    /* HOF Page Mobile */
    #halloffame .about-content,
    .hof-text,
    .hof-grid {
        max-width: 100%;
        padding: 0;
    }

    .hof-text p {
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 16px;
    }

    .about-text p {
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 16px;
    }

    .profile-image {
        margin: 20px 0;
        border-radius: 6px;
    }

    .contact-section {
        margin-top: 24px;
    }

    .blog-section {
        margin-top: 24px;
    }

    .blog-item {
        padding: 16px;
    }

    .blog-item-text {
        font-size: 14px;
    }

    /* Create Page */
    .section-title {
        font-size: 14px;
        margin-bottom: 16px;
    }

    .create-item {
        padding: 16px;
        margin-bottom: 12px;
    }

    .create-item .item-heading {
        font-size: 14px;
    }

    .create-item .item-description {
        font-size: 14px;
        line-height: 1.8;
        margin-bottom: 16px;
    }

    .create-item .item-tag {
        font-size: 11px;
        padding: 5px 10px;
    }

    /* Consume Page */
    .consume-title {
        font-size: 14px;
        margin-bottom: 16px;
    }

    .consume-item {
        padding: 16px;
        margin-bottom: 12px;
    }

    .consume-item-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .consume-item .item-heading {
        font-size: 14px;
    }

    .consume-item .item-date {
        font-size: 11px;
    }

    .consume-ps {
        margin-top: 16px;
    }

    .consume-ps p {
        font-size: 13px;
        line-height: 1.5;
    }

    /* Changelog Page */
    .changelog-title {
        font-size: 14px;
        margin-bottom: 12px;
    }

    .changelog-list li {
        margin-bottom: 12px;
    }

    .changelog-entry {
        gap: 12px;
        padding: 16px;
    }

    .changelog-message {
        font-size: 14px;
        margin-bottom: 12px;
    }

    .changelog-description {
        font-size: 14px;
        line-height: 1.8;
        margin: 0 0 16px 0;
    }

    .changelog-list a {
        font-size: 14px;
    }

    .changelog-list small {
        font-size: 11px;
    }

    /* Guestbook */
    .guestbook-container {
        padding: 0;
    }

    .canvas-header {
        padding: 12px 16px 8px;
    }

    .canvas-title {
        font-size: 13px;
        margin-bottom: 4px;
    }

    .canvas-info {
        font-size: 11px;
    }

    .paint-layout {
        flex-direction: column;
        gap: 12px;
    }

    .tools-sidebar {
        width: 100%;
        flex-direction: column;
        padding: 10px 12px;
        gap: 10px;
        background: color-mix(in srgb, var(--fg) 5%, transparent);
    }

    .tools-sidebar .tool-group {
        display: flex;
        flex-direction: row;
        gap: 6px;
    }

    .tools-sidebar .tool-group.sizes {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        justify-content: center;
        order: 1;
    }

    .tools-sidebar .colors {
        grid-template-columns: repeat(6, 1fr);
        gap: 8px;
        order: 2;
        width: 100%;
    }

    .canvas-area {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .canvas-wrapper {
        max-width: 100%;
        width: 100%;
    }

    #drawingCanvas {
        width: 100%;
        height: auto;
        touch-action: none;
    }

    .color-option {
        width: 100%;
        aspect-ratio: 1;
        min-height: 40px;
        border-radius: 6px;
    }

    .size-option {
        padding: 8px 10px;
        font-size: 11px;
    }

    .canvas-actions {
        top: 8px;
        right: 8px;
        padding: 4px 6px;
        gap: 6px;
    }

    .canvas-action-btn {
        font-size: 10px;
        padding: 4px 8px;
    }

    .submission-form {
        padding: 16px;
        margin-top: 12px;
        margin-bottom: 80px;
    }

    .canvas-title {
        font-size: 14px;
    }

    .canvas-info {
        font-size: 13px;
    }

    .drawing-tools {
        gap: 15px;
        padding: 15px;
    }

    .tool-group {
        gap: 8px;
    }

    .colors {
        gap: 8px;
    }

    .color-option {
        width: 28px;
        height: 28px;
    }

    .size-option,
    .tool-button {
        padding: 6px 12px;
        font-size: 11px;
    }

    .submission-form {
        padding: 20px;
        margin-bottom: 80px;
    }

    .viewing-header-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .viewing-title {
        font-size: 14px;
    }

    .back-to-canvas-button {
        width: auto;
        padding: 8px 16px;
    }

    .viewing-header {
        margin-bottom: 20px;
    }

    .drawings-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 20px;
        margin-top: 20px;
        margin-bottom: 80px;
        /* Handled by guestbook-container */
    }

    .viewing-mode.active {
        padding-bottom: 0;
    }

    .grid-item {
        padding: 10px 10px 35px 10px;
        box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.1);
    }

    .grid-item::before {
        top: -12px;
        width: 24px;
        height: 30px;
    }

    .grid-item-handle {
        bottom: 6px;
        left: 10px;
        right: 10px;
        font-size: 9px;
    }

    .grid-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .modal-content {
        padding: 30px 20px;
        width: 95vw;
    }

    #modalDrawing {
        height: 300px;
    }

    .modal-info {
        min-height: 100px;
    }

    .modal-close {
        top: 15px;
        right: 15px;
        font-size: 28px;
    }

    .modal-nav {
        bottom: 20px;
        padding: 8px 12px;
        font-size: 12px;
    }

    .modal-nav-prev {
        left: 15px;
    }

    .modal-nav-next {
        right: 15px;
    }

    .modal-counter {
        font-size: 11px;
        bottom: 20px;
    }

    /* Footer */
    .footer {
        margin-top: 40px;
        padding-top: 15px;
    }

    .footer-content {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .footer-left {
        display: none;
    }

    .footer-right {
        font-size: 11px;
    }

    .table-flip {
        font-size: 20px;
        order: -1;
        margin-bottom: 8px;
    }
}

/* Tablet Styles */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        padding: 30px 20px;
    }

    .header-inner {
        max-width: 700px;
    }

    .about-text {
        max-width: 700px;
    }

    /* HOF Page Tablet */
    #halloffame .about-content,
    .hof-text,
    .hof-grid {
        max-width: 700px;
    }

    .footer {
        max-width: 700px;
    }

    .project-grid {
        gap: 0;
    }

    .project-item {
        padding: 18px;
    }

    /* Guestbook - Tablet */
    .drawings-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 35px 25px;
        margin-top: 28px;
        margin-bottom: 80px;
        /* Handled by guestbook-container */
    }

    .grid-item {
        padding: 12px 12px 42px 12px;
        box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.1);
    }

    .grid-item::before {
        top: -13px;
        width: 26px;
        height: 32px;
    }

    .grid-item-handle {
        bottom: 7px;
        left: 12px;
        right: 12px;
        font-size: 10px;
    }
}

/* Small Mobile Styles */
@media (max-width: 480px) {
    body {
        font-size: 13px;
    }

    .container {
        padding: 15px 12px;
    }

    .header {
        margin-bottom: 30px;
    }

    .nav-tabs {
        gap: 12px;
    }

    .nav-group {
        gap: 10px;
    }

    .tab-button {
        padding: 6px 12px;
        font-size: 13px;
    }

    .nav-group .tab-button {
        padding: 6px 12px;
    }

    .about-text p {
        font-size: 13px;
        line-height: 1.6;
    }

    .blog-list li,
    .item-title {
        font-size: 13px;
    }

    .project-item {
        padding: 14px;
        font-size: 13px;
    }

    .project-item::before {
        font-size: 11px;
    }

    .table-flip {
        font-size: 18px;
    }

    .footer-left {
        display: none;
    }

    .footer-right {
        font-size: 10px;
    }

    /* Guestbook - Small Mobile */
    .viewing-header {
        margin-bottom: 16px;
    }

    .drawings-grid {
        margin-top: 16px;
        margin-bottom: 80px;
    }

    .viewing-mode.active {
        padding-bottom: 0;
    }

}

/* ==========================================
   HALL OF FAME ENTRY MODAL
   ========================================== */

.hof-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
    overflow-y: auto;
    padding: 20px;
}

.hof-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hof-modal-content {
    background: var(--bg);
    max-width: 600px;
    width: 100%;
    padding: 40px;
    border-radius: 8px;
    border: 2px solid var(--fg);
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}

.hof-modal-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--fg);
}

.hof-modal-subtitle {
    font-size: 14px;
    margin-bottom: 30px;
    color: var(--fg);
    opacity: 0.8;
}

.hof-rank-badge {
    display: inline-block;
    background: var(--fg);
    color: var(--bg);
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 30px;
}

.hof-entry-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.hof-form-section {
    margin-bottom: 20px;
}

.hof-field-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--fg);
    margin-bottom: 8px;
    opacity: 0.8;
}

.hof-handles-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.hof-handle-field {
    display: flex;
    flex-direction: column;
}

.hof-comment-section {
    margin-bottom: 20px;
}

.hof-char-count {
    text-align: right;
    font-size: 12px;
    color: var(--fg);
    opacity: 0.6;
    margin-top: 4px;
}

.hof-mystery-section {
    background: color-mix(in srgb, var(--fg) 5%, transparent);
    padding: 16px;
    border-radius: 6px;
    margin-bottom: 20px;
}

.hof-mystery-text {
    font-size: 13px;
    color: var(--fg);
    margin-bottom: 8px;
    line-height: 1.5;
}

.hof-mystery-text strong {
    font-weight: 700;
}

.hof-mystery-note {
    font-size: 11px;
    color: var(--fg);
    opacity: 0.6;
    font-style: italic;
}

.hof-upload-area {
    border: 2px dashed var(--fg);
    padding: 40px 20px;
    text-align: center;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    display: block;
    color: var(--fg);
}

.hof-upload-area:hover {
    background: color-mix(in srgb, var(--fg) 5%, transparent);
}

.hof-upload-area.has-file {
    border-style: solid;
    background: color-mix(in srgb, var(--fg) 5%, transparent);
}

#hofPhotoInput {
    display: none;
}

.hof-preview-image {
    max-width: 200px;
    max-height: 200px;
    margin: 16px auto 0;
    display: none;
    border-radius: 6px;
    border: 2px solid var(--fg);
}

.hof-preview-image.active {
    display: block;
}


.hof-form-input {
    width: 100%;
    padding: 12px;
    border: 2px solid var(--fg);
    background: var(--bg);
    color: var(--fg);
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 14px;
    border-radius: 6px;
}

.hof-form-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fg) 20%, transparent);
}

.hof-textarea {
    resize: vertical;
    min-height: 100px;
}

.hof-submit-btn {
    background: var(--fg);
    color: var(--bg);
    border: none;
    padding: 16px 32px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
    width: 100%;
    margin-bottom: 12px;
}

.hof-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.hof-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.hof-submit-note {
    text-align: center;
    font-size: 13px;
    color: color-mix(in srgb, var(--fg) 70%, transparent);
    margin: 0;
}

.hof-error-message {
    color: #dc2626;
    font-size: 13px;
    margin-top: 8px;
}

/* ==========================================
   HALL OF FAME POLAROID CARDS
   ========================================== */

.hof-polaroid {
    background: #fff;
    padding: 16px 16px 40px 16px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    position: relative;
}

.hof-polaroid:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.hof-polaroid-inner {
    width: 100%;
}

.hof-photo-wrapper {
    width: 100%;
    aspect-ratio: 1;
    background: #f5f5f5;
    overflow: hidden;
    margin-bottom: 12px;
}

.hof-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hof-caption {
    text-align: center;
    padding: 0 8px;
}

.hof-username {
    font-family: 'Caveat', cursive, 'Comic Sans MS', cursive;
    font-size: 20px;
    font-weight: 500;
    color: #333;
    margin: 8px 0 0 0;
    line-height: 1.2;
    word-break: break-word;
}

.hof-rank-badge {
    display: inline-block;
    background: var(--fg);
    color: var(--bg);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 8px;
}

.hof-user-message {
    font-size: 12px;
    color: #666;
    margin: 8px 0 0 0;
    font-style: italic;
    line-height: 1.4;
}

.hof-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 30px;
    margin-top: 30px;
    padding-bottom: 0;
}

@media (max-width: 768px) {
    .hof-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 15px;
    }

    .hof-username {
        font-size: 18px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .hof-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px 20px;
    }
}

@media (max-width: 768px) {
    .hof-modal-content {
        padding: 30px 20px;
        max-height: 95vh;
    }

    .hof-modal-title {
        font-size: 20px;
    }

    .hof-handles-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .hof-mystery-section {
        padding: 14px;
    }

    .hof-mystery-text {
        font-size: 12px;
    }
}
}