@font-face { font-family: '仓耳与墨 W01'; src: url('../fonts/仓耳与墨W01.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: '仓耳与墨 W02'; src: url('../fonts/仓耳与墨W02.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
    --neo-bg: #E0E5EC;
    --neo-text: #3D4852;
    --neo-muted: #55616D;
    --neo-placeholder: #7d8793;
    --neo-accent: #6C63FF;
    --neo-accent-light: #8B84FF;
    --neo-teal: #38B2AC;
    --neo-light: rgba(255,255,255,.58);
    --neo-dark: rgba(163,177,198,.68);
    --neo-shadow: 9px 9px 16px var(--neo-dark), -9px -9px 16px var(--neo-light);
    --neo-shadow-hover: 12px 12px 20px rgba(163,177,198,.72), -12px -12px 20px rgba(255,255,255,.64);
    --neo-shadow-small: 5px 5px 10px rgba(163,177,198,.62), -5px -5px 10px rgba(255,255,255,.56);
    --neo-inset: inset 6px 6px 10px rgba(163,177,198,.62), inset -6px -6px 10px rgba(255,255,255,.56);
    --neo-inset-deep: inset 10px 10px 20px rgba(163,177,198,.7), inset -10px -10px 20px rgba(255,255,255,.6);
    --neo-inset-small: inset 3px 3px 6px rgba(163,177,198,.62), inset -3px -3px 6px rgba(255,255,255,.56);
    --neo-radius: 22px;
    --neo-radius-small: 11px;
    --neo-ease: 300ms ease-out;
    --neo-toggle-icon: '☾';
}

html[data-theme='dark'] {
    --neo-bg: #202631;
    --neo-text: #E8EDF4;
    --neo-muted: #C1CBD7;
    --neo-placeholder: #8895A6;
    --neo-accent: #9A92FF;
    --neo-accent-light: #B2ADFF;
    --neo-teal: #55C7C0;
    --neo-light: rgba(76, 88, 106, .34);
    --neo-dark: rgba(8, 12, 18, .72);
    --neo-shadow: 9px 9px 16px var(--neo-dark), -9px -9px 16px var(--neo-light);
    --neo-shadow-hover: 12px 12px 20px rgba(8, 12, 18, .8), -12px -12px 20px rgba(76, 88, 106, .42);
    --neo-shadow-small: 5px 5px 10px rgba(8, 12, 18, .72), -5px -5px 10px rgba(76, 88, 106, .38);
    --neo-inset: inset 6px 6px 10px rgba(8, 12, 18, .68), inset -6px -6px 10px rgba(76, 88, 106, .34);
    --neo-inset-deep: inset 10px 10px 20px rgba(8, 12, 18, .76), inset -10px -10px 20px rgba(76, 88, 106, .38);
    --neo-inset-small: inset 3px 3px 6px rgba(8, 12, 18, .68), inset -3px -3px 6px rgba(76, 88, 106, .34);
    --neo-toggle-icon: '☀';
}

* { box-sizing: border-box; }
html { background: var(--neo-bg)!important; scroll-behavior: smooth; }
body { background: var(--neo-bg)!important; color: var(--neo-text)!important; font-family: '仓耳与墨 W01','Songti SC',serif!important; overflow-x: hidden; font-weight: 400!important; }
body, body * { border-color: transparent; }
body .nav-link, body .nav-feedback, body .nav-toggle { font-family: '仓耳与墨 W01','Songti SC',serif!important; }
h1,h2,h3,h4,.nav-brand strong,.hero h1 { font-family: '仓耳与墨 W02','Songti SC',serif!important; color: var(--neo-text)!important; letter-spacing: .025em!important; }
a,button,input,select,textarea { font-family: '仓耳与墨 W01','Songti SC',serif!important; }
body, body *, body *::before, body *::after { font-family: '仓耳与墨 W01','Songti SC',serif!important; }
h1,h2,h3,h4,h5,h6,.nav-brand strong,.hero h1,.section-heading h2,.app-card h3,.note-card h3,.contact-panel h2,.page-header h1,.project-hero h1,.project-section-heading h2,.project-next h2 { font-family: '仓耳与墨 W02','Songti SC',serif!important; }
.section-kicker,.eyebrow,.modal-kicker,.card-index,.nav-brand span { font-family: '仓耳与墨 W01','Songti SC',serif!important; letter-spacing: .08em!important; }
a { color: var(--neo-text); }

.soft-bg { position: fixed!important; inset: 0!important; z-index: -5!important; background: var(--neo-bg)!important; }

.theme-toggle { position: fixed!important; top: 18px!important; left: 8px!important; z-index: 1000!important; width: 42px!important; height: 42px!important; padding: 0!important; border: 0!important; border-radius: 10px!important; background: var(--neo-bg)!important; color: var(--neo-accent)!important; box-shadow: var(--neo-shadow-small)!important; cursor: pointer!important; font-size: 1.15rem!important; line-height: 1!important; transition: var(--neo-ease)!important; }
.theme-toggle::before { content: var(--neo-toggle-icon); }
.theme-toggle:hover { transform: translateY(-1px)!important; box-shadow: var(--neo-shadow)!important; }
.theme-toggle:active { transform: translateY(.5px)!important; box-shadow: var(--neo-inset-small)!important; }
.theme-toggle:focus-visible { outline: 2px solid var(--neo-accent)!important; outline-offset: 3px!important; }
.soft-bg::after { display: none!important; }
.mystic-effects,.hero-video,.hero-bg,.hero-grid-mark,.lumen-grid-decor,.lumen-nodes { display: none!important; }

.navbar { position: sticky!important; top: 0!important; z-index: 100!important; min-height: 76px; padding: 18px clamp(20px,5vw,64px)!important; background: var(--neo-bg)!important; color: var(--neo-text)!important; border: 0!important; box-shadow: 0 5px 14px rgba(163,177,198,.34)!important; backdrop-filter: blur(14px)!important; }
html[data-theme='dark'] .navbar { box-shadow: 0 5px 14px rgba(8,12,18,.5)!important; }
.nav-brand { gap: 12px!important; }
.nav-brand strong { font-size: 1.2rem!important; font-weight: 800!important; color: #3D4852!important; background: none!important; text-shadow: none!important; }
html[data-theme='dark'] .nav-brand strong { color: #E8EDF4!important; }
.nav-brand strong::after,.nav-brand span { display: none!important; }
.nav-links { gap: 8px!important; }
.nav-link { display: inline-flex!important; align-items: center!important; justify-content: center!important; min-height: 40px!important; padding: 9px 14px!important; border-radius: 10px!important; color: var(--neo-text)!important; background: var(--neo-bg)!important; box-shadow: var(--neo-shadow-small)!important; font-size: .84rem!important; font-weight: 500!important; letter-spacing: 0!important; transition: var(--neo-ease)!important; }
.nav-link::after { display: none!important; }
.nav-link:hover,.nav-link.active { color: var(--neo-accent)!important; background: var(--neo-bg)!important; box-shadow: var(--neo-inset-small)!important; transform: translateY(.5px)!important; }
.nav-feedback,.nav-toggle { min-height: 40px!important; border: 0!important; border-radius: 10px!important; background: var(--neo-bg)!important; color: var(--neo-accent)!important; box-shadow: var(--neo-shadow-small)!important; transition: var(--neo-ease)!important; }
.nav-feedback { padding: 9px 15px!important; font-size: .84rem!important; font-weight: 600!important; }
.nav-toggle { padding: 9px 13px!important; }
.nav-feedback:hover,.nav-toggle:hover { transform: translateY(-1px)!important; box-shadow: var(--neo-shadow)!important; }
.nav-feedback:active,.nav-toggle:active { box-shadow: var(--neo-inset-small)!important; transform: translateY(.5px)!important; }

main { position: relative; z-index: 1; }
.hero { min-height: auto!important; height: auto!important; padding: clamp(72px,12vw,150px) clamp(20px,8vw,120px) clamp(72px,10vw,130px)!important; display: grid!important; grid-template-columns: minmax(0,1.25fr) minmax(280px,.75fr)!important; gap: clamp(36px,7vw,100px)!important; align-items: center!important; background: var(--neo-bg)!important; isolation: auto!important; }
.hero-content { position: relative!important; top: auto!important; left: auto!important; max-width: 760px!important; z-index: 2!important; }
.eyebrow,.section-kicker,.modal-kicker { color: var(--neo-accent)!important; font-size: .74rem!important; font-weight: 700!important; letter-spacing: .12em!important; }
.eyebrow::before,.section-kicker::before { display: none!important; }
.hero h1 { margin: 18px 0 18px!important; max-width: 720px!important; font-size: clamp(2.7rem,7vw,6rem)!important; line-height: 1.08!important; font-weight: 800!important; background: none!important; color: var(--neo-text)!important; text-shadow: none!important; }
.hero h1 small { display: block!important; margin-top: 18px!important; color: var(--neo-accent)!important; font-family: 'DM Sans','Noto Sans SC',sans-serif!important; font-size: clamp(1rem,2vw,1.35rem)!important; line-height: 1.5!important; letter-spacing: 0!important; background: none!important; }
.hero-desc { max-width: 580px!important; color: var(--neo-muted)!important; font-size: 1.04rem!important; line-height: 1.8!important; }
.hero-actions { display: flex!important; flex-wrap: wrap!important; gap: 16px!important; margin-top: 28px!important; }
.btn-primary,.btn-secondary { min-height: 48px; padding: 13px 22px!important; border: 0!important; border-radius: var(--neo-radius-small)!important; font-weight: 700!important; transition: var(--neo-ease)!important; }
.btn-primary { background: var(--neo-accent)!important; color: #fff!important; box-shadow: 5px 5px 10px rgba(163,177,198,.65), -5px -5px 10px rgba(255,255,255,.52)!important; }
.btn-secondary { background: var(--neo-bg)!important; color: var(--neo-text)!important; box-shadow: var(--neo-shadow-small)!important; }
.btn-primary:hover,.btn-secondary:hover { transform: translateY(-1px)!important; box-shadow: var(--neo-shadow-hover)!important; }
.btn-primary:active,.btn-secondary:active { transform: translateY(.5px)!important; box-shadow: var(--neo-inset-small)!important; }
.btn-primary:focus-visible,.btn-secondary:focus-visible,.nav-link:focus-visible,.nav-feedback:focus-visible,.nav-toggle:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline: 2px solid var(--neo-accent)!important; outline-offset: 3px!important; }
.hero-note { width: 100%!important; max-width: 380px!important; justify-self: end!important; padding: clamp(28px,4vw,44px)!important; border: 0!important; border-radius: var(--neo-radius)!important; background: var(--neo-bg)!important; box-shadow: var(--neo-shadow)!important; }
.hero-note:hover { transform: translateY(-2px)!important; border: 0!important; box-shadow: var(--neo-shadow-hover)!important; }
.seal-mark { width: 52px!important; height: 52px!important; border: 0!important; border-radius: 16px!important; background: var(--neo-bg)!important; color: var(--neo-accent)!important; box-shadow: var(--neo-inset)!important; }
.seal-mark::before { display: none!important; }
.hero-note p { color: var(--neo-text)!important; font-family: 'DM Sans','Noto Sans SC',sans-serif!important; font-size: 1.05rem!important; line-height: 1.8!important; }
.hero-stats { border-top: 1px solid rgba(163,177,198,.3)!important; }
.hero-stats strong { color: var(--neo-accent)!important; background: none!important; font-family: 'Plus Jakarta Sans',sans-serif!important; }
.hero-stats span { color: var(--neo-muted)!important; }
.scroll-cue { color: var(--neo-muted)!important; }
.scroll-cue span { background: var(--neo-accent)!important; }

.works-section,.notes-section,.contact-section,.intro-strip,.subpage-main,.project-main { width: min(100%,1440px)!important; max-width: min(100%,1440px)!important; margin-inline: auto!important; padding: clamp(56px,8vw,112px) clamp(20px,6vw,80px)!important; background: var(--neo-bg)!important; }
.section-heading,.project-section-heading { border-bottom: 0!important; margin-bottom: 36px!important; }
.section-heading h2,.intro-grid h2,.contact-panel h2,.page-header h1,.project-hero h1,.project-section-heading h2,.project-next h2 { color: var(--neo-text)!important; background: none!important; font-weight: 800!important; }
.section-heading h2 { font-size: clamp(2rem,4vw,3.6rem)!important; }
.section-heading>p,.page-header p { color: var(--neo-muted)!important; }
.apps-grid,.games-grid { gap: 32px!important; }
.app-card,.note-card,.contact-panel,.game-column,.announcement-card,.publish-section,.submit-card,.board-section,.feedback-card,.project-status-card,.project-facts,.project-note,.project-next { background: var(--neo-bg)!important; border: 0!important; border-radius: var(--neo-radius)!important; box-shadow: var(--neo-shadow)!important; backdrop-filter: none!important; }
.app-card { min-height: 320px!important; padding: 32px!important; }
.app-card:hover,.game-column:hover,.announcement-card:hover,.feedback-card:hover,.project-note:hover { border: 0!important; transform: translateY(-2px)!important; box-shadow: var(--neo-shadow-hover)!important; }
.app-card::before,.app-card::after { display: none!important; }
.app-card h3,.note-card h3,.announcement-card-title,.feedback-card h3,.game-title,.project-note h3 { color: var(--neo-text)!important; font-family: '仓耳与墨 W02','Songti SC',serif!important; font-weight: 700!important; }
.app-card p,.note-card p,.announcement-text,.card-content,.project-description,.project-note p,.project-status-card p,.project-next p,.intro-copy,.contact-copy p { color: #5f6570!important; }
.app-card-bottom { color: #6f5b3d!important; }
.card-index { color: #9a6a2d!important; font-weight: 600!important; }
.app-status { color: #795523!important; font-weight: 600!important; }
.app-status::before { background: #a67838!important; }
.app-status,.badge-type,.badge-pinned,.card-status,.filter-chip { border: 0!important; border-radius: 999px!important; background: var(--neo-bg)!important; box-shadow: var(--neo-inset-small)!important; color: var(--neo-accent)!important; }
.app-status::before { background: var(--neo-teal)!important; box-shadow: none!important; }
.app-card-links a:first-child,.game-feedback-link { border: 0!important; border-radius: var(--neo-radius-small)!important; background: #a67838!important; color: #fffaf0!important; box-shadow: 5px 5px 10px rgba(163,177,198,.65),-5px -5px 10px rgba(255,255,255,.52)!important; }
.app-card-links a:not(:first-child) { color: #8a612b!important; font-weight: 600!important; }
.app-card-links a:first-child:hover,.game-feedback-link:hover { background: #8b5f25!important; color: #fffaf0!important; box-shadow: var(--neo-shadow-hover)!important; }
.app-card-links a:not(:first-child):hover { color: #684519!important; text-decoration: underline!important; }
.filter-chip:hover,.filter-chip.active { background: var(--neo-bg)!important; color: #8a612b!important; box-shadow: var(--neo-inset-small)!important; }
.note-card,.project-note { border-bottom: 0!important; padding: 24px!important; }
.note-card time,.project-note time,.text-link,.announcement-date,.card-category { color: var(--neo-accent)!important; }
.contact-panel,.project-next { padding: clamp(28px,5vw,64px)!important; }
.intro-strip { border: 0!important; }
.footer { background: var(--neo-bg)!important; border-top: 0!important; padding: 64px clamp(20px,8vw,120px) 28px!important; }
.footer-brand h3 { color: var(--neo-text)!important; background: none!important; }
.footer-brand p,.footer-bottom { color: var(--neo-muted)!important; }
.footer-links h4 { color: var(--neo-accent)!important; }
.footer-links a,.footer-links .admin-login-btn { display: inline-flex!important; align-items: center!important; min-height: 38px!important; width: fit-content!important; padding: 8px 13px!important; border: 0!important; border-radius: 10px!important; background: var(--neo-bg)!important; color: var(--neo-text)!important; box-shadow: var(--neo-shadow-small)!important; font-family: 'DM Sans','Noto Sans SC',sans-serif!important; font-size: .84rem!important; letter-spacing: 0!important; transition: var(--neo-ease)!important; }
.footer-links a:hover,.footer-links .admin-login-btn:hover { color: var(--neo-accent)!important; transform: translateY(-1px)!important; box-shadow: var(--neo-shadow)!important; }
.footer-links a:active,.footer-links .admin-login-btn:active { transform: translateY(.5px)!important; box-shadow: var(--neo-inset-small)!important; }
.footer-bottom { border-top: 1px solid rgba(163,177,198,.3)!important; }

.form-group input,.form-group select,.form-group textarea,.action-select,.action-textarea,.feedback-search input,.comment-form input { min-height: 48px; background: var(--neo-bg)!important; color: var(--neo-text)!important; border: 0!important; border-radius: var(--neo-radius-small)!important; box-shadow: var(--neo-inset-deep)!important; padding: 13px 16px!important; }
.form-group textarea,.action-textarea { min-height: 120px; }
.form-group input::placeholder,.form-group textarea::placeholder,.comment-form input::placeholder { color: var(--neo-placeholder)!important; }
.form-group input:focus,.form-group select:focus,.form-group textarea:focus,.action-select:focus,.action-textarea:focus,.feedback-search input:focus,.comment-form input:focus { outline: 2px solid var(--neo-accent)!important; outline-offset: 2px!important; box-shadow: var(--neo-inset-deep)!important; }
.form-group label,.pin-option { color: var(--neo-text)!important; }
.submit-card,.board-section { padding: 32px!important; }
.feedback-card { padding: 28px!important; }
.admin-reply-box,.comment-item,.empty-state,.empty-note,.project-empty { background: var(--neo-bg)!important; border: 0!important; border-radius: var(--neo-radius-small)!important; box-shadow: var(--neo-inset)!important; }
.admin-reply-box { border-left: 4px solid var(--neo-accent)!important; }
.comment-item { box-shadow: var(--neo-inset-small)!important; }
.comments-section,.admin-actions,.card-header,.game-header,.announcement-card-header,.publish-header { border-color: rgba(163,177,198,.3)!important; }
.modal-overlay { background: rgba(224,229,236,.78)!important; backdrop-filter: blur(12px)!important; }
.feedback-modal { background: var(--neo-bg)!important; border: 0!important; border-radius: var(--neo-radius)!important; box-shadow: var(--neo-shadow)!important; }
.modal-close { border: 0!important; border-radius: 50%!important; background: var(--neo-bg)!important; color: var(--neo-text)!important; box-shadow: var(--neo-shadow-small)!important; }
.feedback-option { border: 0!important; border-radius: var(--neo-radius-small)!important; background: var(--neo-bg)!important; box-shadow: var(--neo-shadow-small)!important; }
.feedback-option:hover { background: var(--neo-bg)!important; color: var(--neo-accent)!important; box-shadow: var(--neo-inset-small)!important; transform: none!important; }
.feedback-option strong,.feedback-option-index,.feedback-option-arrow { color: var(--neo-text)!important; }
.feedback-option:hover strong,.feedback-option:hover .feedback-option-index,.feedback-option:hover .feedback-option-arrow { color: var(--neo-accent)!important; }
.project-breadcrumb a,.project-note-meta span:first-child { color: var(--neo-accent)!important; }
.project-seal { border: 0!important; border-radius: 16px!important; background: var(--neo-bg)!important; color: var(--neo-accent)!important; box-shadow: var(--neo-inset)!important; }
.project-facts div { border-color: rgba(163,177,198,.3)!important; }
.project-facts strong,.project-status-card strong { color: var(--neo-accent)!important; background: none!important; }

@media(max-width:900px){.hero{grid-template-columns:1fr!important}.hero-note{justify-self:stretch!important;max-width:none!important}.feedback-page .content-container{grid-template-columns:1fr!important}.feedback-page .submit-section{position:static!important}}
@media(max-width:768px){.theme-toggle{top:10px!important;left:8px!important;right:auto!important;width:38px!important;height:38px!important}.navbar{padding:14px 20px!important}.nav-links{display:none!important}.nav-toggle{display:inline-flex!important}.hero{padding:72px 20px 80px!important}.hero h1{font-size:clamp(2.4rem,12vw,4rem)!important}.section-heading{align-items:flex-start!important;gap:12px!important}.footer-content{grid-template-columns:1fr!important}.footer-bottom{align-items:flex-start!important;flex-direction:column!important}.project-main,.subpage-main{padding:72px 20px 64px!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* Contrast and action controls: keep legacy admin actions readable on the cool-grey surface. */
.announcement-card-content,.announcement-text,.announcement-text p,.announcement-card-title,.announcement-meta,.announcement-date,.announcement-toggle,.game-title,.game-feedback-link,.publish-header h3,.publish-header p,.form-group label,.announcement-legend span,.empty-state h3,.empty-state p,.feedback-card h3,.feedback-card .card-content,.admin-reply-box p,.comment-item,.comment-item div,.comments-section,.project-note h3,.project-note p,.project-status-card p,.project-next p,.page-header p,.section-heading>p,.note-card p,.intro-copy,.contact-copy p { color: var(--neo-text)!important; }
.announcement-text,.announcement-card-content p,.feedback-card .card-content,.admin-reply-box p,.comment-item div,.project-note p,.project-status-card p,.project-next p,.page-header p,.section-heading>p,.note-card p,.intro-copy,.contact-copy p { color: #4f5b66!important; }
.announcement-date,.announcement-toggle,.text-link,.game-feedback-link,.announcement-card .announcement-date { color: #8a612b!important; font-weight: 700!important; }
.badge-type,.badge-pinned,.card-status,.app-status,.filter-chip { color: #795523!important; font-weight: 700!important; }
.app-status::before { background: #a67838!important; box-shadow: none!important; }
.app-card-links a:first-child,.game-feedback-link { background: #a67838!important; color: #fffaf0!important; }
.app-card-links a:not(:first-child) { color: #8a612b!important; }
.app-card-links a:first-child:hover,.game-feedback-link:hover { background: #8b5f25!important; color: #fffaf0!important; }
.app-card-links a:not(:first-child):hover { color: #684519!important; }
.btn-action { display: inline-flex!important; align-items: center!important; justify-content: center!important; min-height: 44px!important; padding: 10px 22px!important; border: 0!important; border-radius: 16px!important; font: 700 14px/1 'DM Sans','Noto Sans SC',sans-serif!important; transition: var(--neo-ease)!important; box-shadow: var(--neo-shadow-small)!important; cursor: pointer!important; }
.btn-action.edit { background: var(--neo-accent)!important; color: #fff!important; box-shadow: 5px 5px 10px rgba(163,177,198,.65),-5px -5px 10px rgba(255,255,255,.52)!important; }
.btn-action.delete { background: var(--neo-bg)!important; color: #b83d55!important; border: 0!important; box-shadow: var(--neo-shadow-small)!important; }
.btn-action.edit:hover,.btn-action.delete:hover { transform: translateY(-1px)!important; box-shadow: var(--neo-shadow-hover)!important; }
.btn-action.edit:active,.btn-action.delete:active { transform: translateY(.5px)!important; box-shadow: var(--neo-inset-small)!important; }
.btn-action.delete:hover { color: #9e2842!important; }
.announcement-actions,.admin-actions>form>div:last-child { display: flex!important; align-items: center!important; gap: 12px!important; }
.announcement-card-content .announcement-actions { margin-top: 20px!important; padding-top: 16px!important; border-top: 1px solid rgba(163,177,198,.35)!important; }
.badge-type.type-major,.badge-type.type-release,.badge-type.type-fix,.badge-type.type-minor,.card-status { background: var(--neo-bg)!important; box-shadow: var(--neo-inset-small)!important; }
.status-reviewing,.status-in_progress,.status-accepted,.status-rejected,.status-pending,.status-resolved { color: #5148d8!important; background: var(--neo-bg)!important; }
.copy-feedback-link { color: #4f5b66!important; font-weight: 700!important; }
input,select,textarea { color: var(--neo-text)!important; }
input::placeholder,textarea::placeholder { color: #6b7280!important; opacity: 1!important; }

/* Feedback header uses inline legacy colors; normalize it with the site palette. */
.nav-brand-group > span[style*="border-gold"] { color: var(--neo-muted)!important; font-family: 'DM Sans','Noto Sans SC',sans-serif!important; }
.nav-brand-group > span[style*="gold-bright"] { color: var(--neo-accent)!important; font-family: 'DM Sans','Noto Sans SC',sans-serif!important; font-size: .9rem!important; font-weight: 600!important; }

/* Mobile layout stabilization: keep controls and long content from colliding. */
@media (max-width: 768px) {
    html, body { width: 100%; min-width: 0; overflow-x: hidden; }
    .navbar { display: grid!important; grid-template-columns: minmax(0, 1fr) auto!important; align-items: center!important; gap: 10px!important; min-height: 64px!important; padding: 10px 14px!important; }
    .nav-brand, .nav-brand-group { min-width: 0!important; max-width: 100%!important; }
    .nav-brand strong { display: block!important; overflow: hidden!important; text-overflow: ellipsis!important; white-space: nowrap!important; font-size: 1rem!important; }
    .nav-brand-group { gap: 8px!important; }
    .nav-brand-group > span:last-child { max-width: 34vw!important; overflow: hidden!important; text-overflow: ellipsis!important; white-space: nowrap!important; }
    .nav-brand-group > span[style] { color: var(--neo-muted)!important; font-family: 'DM Sans','Noto Sans SC',sans-serif!important; font-size: .78rem!important; }
    .nav-brand-group > span[style*="border-gold"] { color: var(--neo-muted)!important; }
    .nav-brand-group > span[style*="gold-bright"] { color: var(--neo-accent)!important; font-family: 'DM Sans','Noto Sans SC',sans-serif!important; font-size: .84rem!important; font-weight: 600!important; }
    .navbar > .nav-links { grid-column: 1 / -1!important; grid-row: 2!important; width: 100%!important; }
    .navbar > .nav-feedback { min-width: 0!important; max-width: 42vw!important; overflow: hidden!important; text-overflow: ellipsis!important; white-space: nowrap!important; padding-inline: 10px!important; font-size: .76rem!important; }
    .navbar > div:last-child { min-width: 0!important; max-width: 46vw!important; gap: 6px!important; }
    .navbar > div:last-child .badge-type { max-width: 27vw!important; overflow: hidden!important; text-overflow: ellipsis!important; white-space: nowrap!important; }
    .nav-toggle { display: inline-flex!important; align-items: center!important; justify-content: center!important; min-width: 48px!important; padding-inline: 10px!important; }
    .navbar.menu-open .nav-links { display: grid!important; grid-template-columns: 1fr 1fr!important; gap: 8px!important; padding: 8px 0 2px!important; }
    .navbar.menu-open .nav-link { width: 100%!important; min-width: 0!important; }
    .theme-toggle { top: 18px!important; left: 8px!important; right: auto!important; width: 42px!important; height: 42px!important; }
    main, .subpage-main, .project-main, .works-section, .notes-section, .contact-section, .intro-strip { min-width: 0!important; }
    .hero { gap: 28px!important; padding: 54px 16px 56px!important; }
    .hero h1 { max-width: 100%!important; font-size: clamp(2.15rem, 11vw, 3.4rem)!important; line-height: 1.18!important; overflow-wrap: anywhere!important; }
    .hero h1 small { margin-top: 12px!important; font-size: .95rem!important; line-height: 1.65!important; letter-spacing: 0!important; }
    .hero-desc { font-size: .94rem!important; line-height: 1.75!important; overflow-wrap: anywhere!important; }
    .hero-actions, .project-actions { display: grid!important; grid-template-columns: 1fr!important; gap: 10px!important; }
    .hero-actions > *, .project-actions > * { width: 100%!important; text-align: center!important; }
    .works-section, .notes-section, .contact-section, .intro-strip, .subpage-main, .project-main { padding-inline: 16px!important; }
    .section-heading, .project-section-heading { display: grid!important; gap: 10px!important; margin-bottom: 24px!important; }
    .section-heading h2, .project-section-heading h2 { font-size: clamp(1.65rem, 8vw, 2.35rem)!important; line-height: 1.3!important; overflow-wrap: anywhere!important; }
    .section-heading > p, .page-header p { max-width: none!important; font-size: .9rem!important; line-height: 1.7!important; }
    .apps-grid, .games-grid { grid-template-columns: minmax(0, 1fr)!important; gap: 18px!important; }
    .app-card, .game-column, .announcement-card, .feedback-card, .project-status-card, .project-facts, .project-note, .project-next, .submit-card, .board-section { min-width: 0!important; }
    .app-card { min-height: 0!important; padding: 22px 18px!important; }
    .app-card h3, .game-title { overflow-wrap: anywhere!important; }
    .app-card-bottom { align-items: flex-start!important; flex-direction: column!important; gap: 12px!important; }
    .app-card-links { width: 100%!important; justify-content: flex-start!important; gap: 8px!important; }
    .app-card-links a { max-width: 100%!important; overflow-wrap: anywhere!important; }
    .note-card, .project-note { grid-template-columns: minmax(0, 1fr) auto!important; gap: 8px 12px!important; padding: 16px!important; }
    .note-card time, .project-note time { grid-column: 1 / -1!important; }
    .note-card h3, .project-note h3, .announcement-card-title { overflow-wrap: anywhere!important; line-height: 1.45!important; }
    .note-card p, .project-note p { display: block!important; font-size: .85rem!important; line-height: 1.65!important; overflow-wrap: anywhere!important; }
    .contact-panel, .project-next { display: grid!important; gap: 20px!important; padding: 22px 18px!important; }
    .intro-grid { display: grid!important; grid-template-columns: 1fr!important; gap: 20px!important; }
    .intro-grid h2, .contact-panel h2, .project-next h2 { font-size: clamp(1.7rem, 8vw, 2.5rem)!important; line-height: 1.35!important; overflow-wrap: anywhere!important; }
    .footer { padding: 42px 16px 20px!important; }
    .footer-content { gap: 24px!important; }
    .footer-bottom { gap: 8px!important; line-height: 1.6!important; overflow-wrap: anywhere!important; }
    .subpage .page-header { padding-inline: 0!important; }
    .announcement-legend { width: 100%!important; border-radius: 16px!important; justify-content: flex-start!important; gap: 8px 14px!important; padding: 10px 12px!important; }
    .game-header, .announcement-card-header, .card-header { align-items: flex-start!important; gap: 10px!important; }
    .game-header { flex-wrap: wrap!important; padding: 16px!important; }
    .game-title { font-size: 1.25rem!important; }
    .game-feedback-link { margin-left: auto!important; }
    .game-announcements { padding: 12px!important; }
    .announcement-card-header { flex-direction: column!important; }
    .announcement-title-group { width: 100%!important; min-width: 0!important; align-items: flex-start!important; }
    .announcement-card-title { width: 100%!important; }
    .announcement-meta { width: 100%!important; justify-content: space-between!important; }
    .form-row { grid-template-columns: 1fr!important; }
    .form-footer { align-items: stretch!important; }
    .form-footer .btn-primary { width: 100%!important; }
    .feedback-page .content-container { gap: 18px!important; }
    .board-tools { align-items: stretch!important; }
    .feedback-search { display: grid!important; grid-template-columns: minmax(0, 1fr) auto!important; }
    .feedback-search input { min-width: 0!important; }
    .filter-chips { gap: 7px!important; }
    .filter-chip { padding-inline: 10px!important; }
    .card-header { flex-wrap: wrap!important; }
    .card-category { min-width: 0!important; overflow-wrap: anywhere!important; }
    .card-status { margin-left: auto!important; }
    .project-hero { grid-template-columns: 1fr!important; gap: 24px!important; padding-top: 16px!important; }
    .project-hero h1 { font-size: clamp(2rem, 11vw, 3.4rem)!important; line-height: 1.2!important; overflow-wrap: anywhere!important; }
    .project-facts { grid-template-columns: 1fr!important; margin: 24px 0!important; }
    .project-facts div { border-right: 0!important; border-bottom: 1px solid rgba(163,177,198,.3)!important; }
    .project-facts div:last-child { border-bottom: 0!important; }
}

@media (max-width: 380px) {
    .navbar { padding-inline: 10px!important; }
    .nav-feedback { max-width: 38vw!important; }
    .theme-toggle { right: 8px!important; }
    .feedback-search { grid-template-columns: 1fr!important; gap: 8px!important; }
    .feedback-search .btn-secondary { width: 100%!important; }
}

/* Restore the original sakura fall layer without bringing back heavy background effects. */
.mystic-effects { display: block!important; z-index: 0!important; }
.mystic-effects .particle-canvas,
.mystic-effects .cursor-aura,
.mystic-effects .mist-layer,
.mystic-effects .scroll-light { display: none!important; }
.mystic-effects .petal-layer { display: block!important; }
.mystic-effects .petal {
    background: linear-gradient(135deg, rgba(255, 226, 233, .96), rgba(232, 126, 153, .86))!important;
    filter: drop-shadow(0 0 5px rgba(213, 105, 136, .3))!important;
    opacity: .82!important;
}

/* Announcements: use the same inset control rail as the rest of the Lumen UI. */
.games-tabs {
    align-items: center!important;
    background: var(--neo-bg)!important;
    border: 0!important;
    border-radius: var(--neo-radius-small)!important;
    box-shadow: var(--neo-inset-small)!important;
    display: grid!important;
    grid-template-columns: repeat(4, max-content)!important;
    gap: 5px!important;
    justify-content: center!important;
    margin-bottom: 24px!important;
    padding: 6px!important;
}

.game-tab {
    align-items: center!important;
    background: transparent!important;
    border: 0!important;
    border-radius: 8px!important;
    color: var(--neo-muted)!important;
    display: inline-flex!important;
    font-size: .92rem!important;
    justify-content: center!important;
    line-height: 1.35!important;
    min-height: 42px!important;
    padding: 10px 16px!important;
    text-align: center!important;
}

.game-tab:hover,
.game-tab:focus-visible {
    background: var(--neo-bg)!important;
    box-shadow: var(--neo-shadow-small)!important;
    color: var(--neo-accent)!important;
    transform: none!important;
}

.game-tab.active {
    background: var(--neo-bg)!important;
    box-shadow: var(--neo-shadow-small)!important;
    color: var(--neo-accent)!important;
    font-weight: 700!important;
}

@media (max-width: 600px) {
    .games-tabs {
        display: flex!important;
        justify-content: flex-start!important;
        margin-inline: -2px!important;
        padding: 5px!important;
    }

    .game-tab {
        font-size: .86rem!important;
        min-height: 40px!important;
        padding-inline: 13px!important;
    }
}