:root {--tanabata-night-1: #0b1035;--tanabata-night-2: #1e2a6e;--tanabata-night-3: #35205e;--tanzaku-red: #f8b4c0;--tanzaku-yellow: #fce38a;--tanzaku-green: #a8e6b8;--tanzaku-blue: #a5d8f3;--tanzaku-purple: #cdb4f0}
.tanabata-ornament {position: absolute;left: 10px;bottom: 76px;z-index: var(--z-index-base);border: 1px solid rgba(255, 255, 255, 0.2);padding: 6px 8px 8px;cursor: pointer;-webkit-tap-highlight-color: transparent;background: linear-gradient(180deg, rgba(11, 16, 53, 0.58), rgba(30, 42, 110, 0.42));backdrop-filter: blur(3px);-webkit-backdrop-filter: blur(3px);border-radius: var(--radius-md);box-shadow: var(--shadow-md);display: flex;flex-direction: column;align-items: center;gap: 4px;opacity: 0;visibility: hidden;transform: translateY(6px);transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease}
.tanabata--log-open .tanabata-ornament {opacity: 1;visibility: visible;transform: none;z-index: calc(var(--z-index-base) + 2);bottom: calc(30px + var(--home-chat-height, 300px) + 8px)}
.tanabata-ornament-badge {background: linear-gradient(135deg, #6d5bd0, #4338ca);color: #fff;font-size: 9.5px;font-weight: 700;padding: 3px 9px;border-radius: 999px;box-shadow: var(--shadow-sm);display: inline-flex;align-items: center;gap: 4px;pointer-events: none;white-space: nowrap}
.tanabata-ornament-sway {display: block;width: 96px;height: 148px;transform-origin: 20% 100%;animation: tanabata-bamboo-sway 5s ease-in-out infinite}
@keyframes tanabata-bamboo-sway {0%, 100% { transform: rotate(-1.2deg); }
50% { transform: rotate(1.6deg); }}
@media (min-width: 769px) {.tanabata-ornament {left: 14px;bottom: 64px}
.tanabata--log-open .tanabata-ornament {bottom: 64px}}
.tanabata-modal {display: none;position: fixed;inset: 0;z-index: var(--z-index-modal);background: rgba(8, 10, 30, 0.6);align-items: center;justify-content: center;padding: 16px}
.tanabata-modal--open {display: flex}
.tanabata-modal-content {position: relative;width: 100%;max-width: 480px;max-height: calc(100dvh - 48px);overflow-y: auto;border-radius: var(--radius-lg);box-shadow: var(--shadow-md);background: linear-gradient(180deg, var(--tanabata-night-1) 0%, var(--tanabata-night-2) 55%, var(--tanabata-night-3) 100%)}
.tanabata-modal-close {position: absolute;top: 14px;right: 14px;z-index: 2;width: 34px;height: 34px;border-radius: 50%;border: 1px solid rgba(255, 255, 255, 0.35);background: rgba(255, 255, 255, 0.12);color: #fff;display: flex;align-items: center;justify-content: center;cursor: pointer}
.tanabata-loading {padding: 48px 16px;text-align: center;color: rgba(255, 255, 255, 0.7);font-size: 13px}
.tanabata-night {position: relative;color: #fff;padding: 18px 18px 20px;min-height: 320px}
.tanabata-night::before {content: "";position: absolute;inset: 0;background:
radial-gradient(ellipse 65% 130% at 78% 8%, rgba(160, 190, 255, 0.22), transparent 60%),
radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent),
radial-gradient(1px 1px at 30% 8%, rgba(255, 255, 255, 0.9), transparent),
radial-gradient(1.5px 1.5px at 55% 14%, rgba(255, 255, 255, 0.8), transparent),
radial-gradient(1px 1px at 70% 24%, #fff, transparent),
radial-gradient(2px 2px at 86% 12%, rgba(255, 255, 230, 0.95), transparent),
radial-gradient(1px 1px at 42% 30%, rgba(255, 255, 255, 0.7), transparent),
radial-gradient(1.5px 1.5px at 90% 38%, rgba(255, 255, 255, 0.75), transparent),
radial-gradient(1px 1px at 20% 44%, rgba(255, 255, 255, 0.6), transparent),
radial-gradient(1px 1px at 64% 48%, rgba(255, 255, 255, 0.55), transparent);pointer-events: none}
.tanabata-night > * {position: relative;z-index: 1}
.tanabata-night-header {padding-right: 44px}
.tanabata-night-title {font-size: 18px;font-weight: 700;letter-spacing: 0.04em;display: flex;align-items: center;gap: 8px;margin: 0}
.tanabata-night-sub {font-size: 11.5px;color: rgba(255, 255, 255, 0.75);margin: 2px 0 10px}
.tanabata-countdown {display: inline-flex;align-items: center;gap: 6px;background: rgba(252, 227, 138, 0.16);border: 1px solid rgba(252, 227, 138, 0.45);color: #fce38a;font-size: 11.5px;font-weight: 700;padding: 4px 12px;border-radius: 999px}
.tanabata-bamboo-scroll {overflow-x: auto;-webkit-overflow-scrolling: touch;padding: 6px 0 10px}
.tanabata-bamboo-canvas {position: relative;height: 330px;background-image: url("/assets/tanabata_bamboo_tile-8409932f.svg");background-repeat: repeat-x;background-position: 40px 0}
.tanabata-bamboo-trunk {position: absolute;top: 0;left: 0;height: 100%}
.tanabata-scroll-hint {text-align: center;font-size: 10.5px;color: rgba(255, 255, 255, 0.55);margin: 0 0 4px}
.tanabata-empty {padding: 60px 16px;text-align: center;font-size: 13px;color: rgba(255, 255, 255, 0.8)}
.tanabata-tanzaku {position: absolute;width: 64px;height: 118px;padding: 8px 6px 6px;border-radius: 3px 3px 4px 4px;box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);display: flex;flex-direction: column;align-items: center;gap: 4px;color: #3f3a2e;text-decoration: none;transform-origin: top center;animation: tanabata-tanzaku-sway 4.5s ease-in-out infinite}
.tanabata-tanzaku:nth-child(odd) {animation-delay: -2.2s}
.tanabata-tanzaku::before {content: "";position: absolute;top: -16px;left: 50%;width: 1.5px;height: 16px;background: rgba(255, 255, 255, 0.85);transform: translateX(-50%)}
.tanabata-tanzaku::after {content: "";position: absolute;top: 4px;left: 50%;width: 5px;height: 5px;border-radius: 50%;background: rgba(0, 0, 0, 0.18);transform: translateX(-50%)}
@keyframes tanabata-tanzaku-sway {0%, 100% { transform: rotate(-2.5deg); }
50% { transform: rotate(2.5deg); }}
.tanabata-tanzaku-body {writing-mode: vertical-rl;font-size: 11px;font-weight: 600;line-height: 1.35;letter-spacing: 0.06em;max-height: 74px;overflow: hidden;margin-top: 6px}
.tanabata-tanzaku-author {font-size: 8.5px;color: rgba(0, 0, 0, 0.5);margin-top: auto;max-width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.tanabata-tanzaku-comments {position: absolute;right: -6px;bottom: -6px;background: #fff;color: var(--color-text-secondary);border-radius: 999px;font-size: 9px;font-weight: 700;padding: 2px 6px;box-shadow: var(--shadow-sm);display: inline-flex;align-items: center;gap: 3px}
.tanabata-tanzaku--red { background: linear-gradient(175deg, #fbc9d2, var(--tanzaku-red)); }
.tanabata-tanzaku--yellow { background: linear-gradient(175deg, #fdedaf, var(--tanzaku-yellow)); }
.tanabata-tanzaku--green { background: linear-gradient(175deg, #c2efcd, var(--tanzaku-green)); }
.tanabata-tanzaku--blue { background: linear-gradient(175deg, #c4e6f8, var(--tanzaku-blue)); }
.tanabata-tanzaku--purple { background: linear-gradient(175deg, #ddc9f6, var(--tanzaku-purple)); }
.tanabata-tanzaku--mine {outline: 2px solid #fce38a;outline-offset: 2px}
.tanabata-tanzaku-mine-chip {position: absolute;top: -24px;left: 50%;transform: translateX(-50%);background: #fce38a;color: #6b5310;font-size: 8.5px;font-weight: 700;padding: 1px 7px;border-radius: 999px;white-space: nowrap}
.tanabata-night-footer {display: flex;gap: 10px;align-items: center;margin-top: 10px}
.tanabata-btn-write {flex: 1;border: none;border-radius: 999px;padding: 13px 16px;font-size: 14px;font-weight: 700;color: #4a3b00;background: linear-gradient(135deg, #fde68a, #fbbf24);box-shadow: 0 4px 14px rgba(251, 191, 36, 0.4);display: inline-flex;align-items: center;justify-content: center;gap: 8px;text-decoration: none;cursor: pointer}
.tanabata-btn-write--done {background: rgba(255, 255, 255, 0.14);color: rgba(255, 255, 255, 0.85);border: 1px solid rgba(255, 255, 255, 0.3);box-shadow: none}
.tanabata-wish-total {font-size: 11.5px;color: rgba(255, 255, 255, 0.7);white-space: nowrap}
.tanabata-wish-total strong {color: #fce38a;font-size: 15px}
.tanabata-back-link {display: inline-flex;align-items: center;gap: 4px;color: rgba(255, 255, 255, 0.75);font-size: 12px;font-weight: 600;text-decoration: none;margin-bottom: 8px}
.tanabata-posted-notice {display: flex;align-items: center;gap: 6px;background: rgba(34, 197, 94, 0.16);border: 1px solid rgba(34, 197, 94, 0.45);color: #6ee7a0;font-size: 12px;font-weight: 600;padding: 8px 12px;border-radius: var(--radius-sm);margin: 0 0 10px}
.tanabata-flip-scene {width: min(280px, 86%);height: 400px;margin: 8px auto 0;perspective: 1200px}
.tanabata-flip-card {position: relative;width: 100%;height: 100%;transform-style: preserve-3d;transition: transform 0.6s cubic-bezier(0.4, 0.1, 0.2, 1)}
.tanabata-flip-card--flipped {transform: rotateY(180deg)}
.tanabata-flip-face {position: absolute;inset: 0;backface-visibility: hidden;-webkit-backface-visibility: hidden;border-radius: 6px;box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);display: flex;flex-direction: column;overflow: hidden}
.tanabata-flip-front {align-items: center;padding: 26px 18px 16px;color: #3f3a2e}
.tanabata-flip-front--red { background: linear-gradient(175deg, #fbc9d2, var(--tanzaku-red)); }
.tanabata-flip-front--yellow { background: linear-gradient(175deg, #fdedaf, var(--tanzaku-yellow)); }
.tanabata-flip-front--green { background: linear-gradient(175deg, #c2efcd, var(--tanzaku-green)); }
.tanabata-flip-front--blue { background: linear-gradient(175deg, #c4e6f8, var(--tanzaku-blue)); }
.tanabata-flip-front--purple { background: linear-gradient(175deg, #ddc9f6, var(--tanzaku-purple)); }
.tanabata-flip-front::before {content: "";width: 7px;height: 7px;border-radius: 50%;background: rgba(0, 0, 0, 0.2);margin-bottom: 12px;flex-shrink: 0}
.tanabata-flip-wish {writing-mode: vertical-rl;font-size: 19px;font-weight: 700;letter-spacing: 0.12em;line-height: 1.7;flex: 1;min-height: 0;overflow: hidden}
.tanabata-flip-meta {margin-top: 12px;display: flex;flex-direction: column;align-items: center;gap: 2px;font-size: 11.5px;color: rgba(0, 0, 0, 0.55)}
.tanabata-flip-name {font-weight: 700;font-size: 13px;display: inline-flex;align-items: center;gap: 5px}
.tanabata-flip-name-link {color: inherit;font-weight: 700;text-decoration: underline;text-underline-offset: 2px;text-decoration-thickness: 1px}
.tanabata-flip-name-link:hover {opacity: 0.75}
.tanabata-flip-back {transform: rotateY(180deg);background: #fdfbf4;color: var(--color-text-primary)}
.tanabata-flip-back-header {padding: 12px 14px;border-bottom: 1px solid var(--color-border);background: linear-gradient(175deg, #eef7fd, #e2f0fa);font-size: 12.5px;font-weight: 700;color: #274158;display: flex;align-items: center;gap: 6px;flex-shrink: 0}
.tanabata-comment-list {flex: 1;overflow-y: auto;padding: 10px 12px;display: flex;flex-direction: column;gap: 10px;min-height: 0}
.tanabata-comment {min-width: 0}
.tanabata-comment-name {font-size: 10.5px;font-weight: 700;color: var(--color-text-muted)}
.tanabata-comment-body {font-size: 12px;background: var(--color-bg-secondary);border-radius: 4px 12px 12px 12px;padding: 6px 10px;margin: 2px 0 0;overflow-wrap: anywhere}
.tanabata-comment-empty {font-size: 11.5px;color: var(--color-text-muted);text-align: center;padding: 16px 8px}
.tanabata-comment-own-note {font-size: 11px;color: var(--color-text-muted);text-align: center;padding: 10px;border-top: 1px solid var(--color-border);margin: 0;background: #fff}
.tanabata-comment-form {padding: 8px 10px 10px;border-top: 1px solid var(--color-border);background: #fff;flex-shrink: 0}
.tanabata-comment-nickname {width: 100%;max-width: 100%;box-sizing: border-box;border: 1px solid var(--color-border);border-radius: 999px;padding: 7px 14px;font-size: 16px;margin-bottom: 6px}
.tanabata-comment-form-row {display: flex;gap: 6px}
.tanabata-comment-input {flex: 1;min-width: 0;max-width: 100%;box-sizing: border-box;border: 1px solid var(--color-border);border-radius: 999px;padding: 8px 14px;font-size: 16px}
.tanabata-comment-submit {border: none;background: var(--color-primary);color: #fff;border-radius: 50%;width: 36px;height: 36px;display: flex;align-items: center;justify-content: center;flex-shrink: 0;cursor: pointer}
.tanabata-flip-scene.tanabata-editing .tanabata-flip-card {transform: none !important;transform-style: flat;transition: none}
.tanabata-flip-scene.tanabata-editing .tanabata-flip-front {visibility: hidden}
.tanabata-flip-scene.tanabata-editing .tanabata-flip-back {transform: none !important;backface-visibility: visible;-webkit-backface-visibility: visible}
.tanabata-flip-scene.tanabata-flip-instant .tanabata-flip-card {transition: none}
.tanabata-flip-hint {text-align: center;margin-top: 16px}
.tanabata-btn-flip {border: 1px solid rgba(255, 255, 255, 0.4);background: rgba(255, 255, 255, 0.12);color: #fff;border-radius: 999px;padding: 10px 22px;font-size: 13px;font-weight: 600;display: inline-flex;align-items: center;gap: 8px;cursor: pointer}
.tanabata-form-card {background: #fff;color: var(--color-text-primary);border-radius: var(--radius-md);padding: 18px 16px;margin-top: 14px}
.tanabata-once-notice {display: flex;gap: 8px;align-items: center;background: #fffbeb;border: 1px solid #fde68a;color: #92400e;border-radius: var(--radius-sm);padding: 10px 12px;font-size: 11.5px;margin: 0 0 16px}
.tanabata-form-error {background: #fef2f2;border: 1px solid #fecaca;color: #991b1b;border-radius: var(--radius-sm);padding: 8px 12px;font-size: 11.5px;margin: 0 0 12px}
.tanabata-field-label {display: block;font-size: 12.5px;font-weight: 700;color: var(--color-text-secondary);margin-bottom: 6px}
.tanabata-field-req {color: var(--color-danger);font-size: 10.5px;margin-left: 4px}
.tanabata-wish-input {width: 100%;max-width: 100%;box-sizing: border-box;border: 1px solid var(--color-border);border-radius: var(--radius-sm);padding: 12px;font-size: 16px;resize: vertical;min-height: 64px;font-family: inherit}
.tanabata-char-count {text-align: right;font-size: 11px;color: var(--color-text-light);margin: 2px 0 14px}
.tanabata-color-picker {display: flex;gap: 10px;margin: 4px 0 16px;flex-wrap: wrap}
.tanabata-color-swatch {position: relative;cursor: pointer}
.tanabata-color-swatch input {position: absolute;opacity: 0;pointer-events: none}
.tanabata-color-swatch-visual {display: block;width: 40px;height: 56px;border-radius: 3px;border: 2px solid transparent;position: relative;box-shadow: var(--shadow-sm)}
.tanabata-color-swatch-visual::before {content: "";position: absolute;top: 5px;left: 50%;width: 4px;height: 4px;border-radius: 50%;background: rgba(0, 0, 0, 0.18);transform: translateX(-50%)}
.tanabata-color-swatch--red .tanabata-color-swatch-visual { background: linear-gradient(175deg, #fbc9d2, var(--tanzaku-red)); }
.tanabata-color-swatch--yellow .tanabata-color-swatch-visual { background: linear-gradient(175deg, #fdedaf, var(--tanzaku-yellow)); }
.tanabata-color-swatch--green .tanabata-color-swatch-visual { background: linear-gradient(175deg, #c2efcd, var(--tanzaku-green)); }
.tanabata-color-swatch--blue .tanabata-color-swatch-visual { background: linear-gradient(175deg, #c4e6f8, var(--tanzaku-blue)); }
.tanabata-color-swatch--purple .tanabata-color-swatch-visual { background: linear-gradient(175deg, #ddc9f6, var(--tanzaku-purple)); }
.tanabata-color-swatch input:checked + .tanabata-color-swatch-visual {border-color: var(--color-primary);box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25)}
.tanabata-color-swatch input:focus-visible + .tanabata-color-swatch-visual {outline: 2px solid var(--color-primary);outline-offset: 2px}
.tanabata-name-input {width: 100%;max-width: 100%;box-sizing: border-box;border: 1px solid var(--color-border);border-radius: var(--radius-sm);padding: 10px 12px;font-size: 16px;margin-bottom: 4px}
.tanabata-field-help {font-size: 11px;color: var(--color-text-muted);margin: 0 0 16px}
.tanabata-btn-submit {width: 100%;border: none;border-radius: 999px;padding: 13px;font-size: 14.5px;font-weight: 700;color: #4a3b00;background: linear-gradient(135deg, #fde68a, #fbbf24);box-shadow: 0 4px 14px rgba(251, 191, 36, 0.35);display: flex;align-items: center;justify-content: center;gap: 8px;cursor: pointer}
.tanabata-login-hint {text-align: center;font-size: 11.5px;color: var(--color-text-muted);margin: 12px 0 0}
.tanabata-login-hint a {color: var(--color-primary);font-weight: 600;text-decoration: none}
@media (max-width: 480px) {.tanabata-flip-scene {height: 360px}}