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

:root {
    --sky-top: #b8dff0;
    --sky-mid: #d0eaf7;
    --sky-bot: #e6f2fa;
    --surface: rgba(255,255,255,.85);
    --border: #d8dfe6;
    --text: #3a3a4a;
    --text-muted: #7a8a96;
    --accent: #5a9ab5;
    --accent-hover: #4a8a9e;
    --radius: 10px;
    --shadow: 0 2px 8px rgba(0,0,0,.05), 0 1px 4px rgba(0,0,0,.04);
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

body {
    font-family: var(--font);
    background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 40%, var(--sky-bot) 100%);
    background-attachment: fixed;
    color: var(--text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    line-height: 1.6;
    overflow-x: hidden;
}

/* ===== Sky & Clouds ===== */
.sky-layer {
    position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
}
.cloud {
    position: absolute; background: rgba(255,255,255,.55); border-radius: 50%; filter: blur(2px);
}
.cloud::before, .cloud::after { content:''; position:absolute; background:inherit; border-radius:50%; }
.cloud-1 { width:140px; height:50px; top:8%; left:-160px; animation:cloud-drift 35s linear infinite; border-radius:40px; }
.cloud-1::before { width:60px; height:60px; top:-30px; left:30px; }
.cloud-1::after  { width:80px; height:70px; top:-35px; left:60px; }
.cloud-2 { width:110px; height:38px; top:22%; left:-130px; animation:cloud-drift 28s linear 5s infinite; border-radius:35px; }
.cloud-2::before { width:50px; height:50px; top:-25px; left:25px; }
.cloud-2::after  { width:60px; height:55px; top:-28px; left:50px; }
.cloud-3 { width:160px; height:55px; top:14%; left:-180px; animation:cloud-drift 42s linear 12s infinite; border-radius:45px; }
.cloud-3::before { width:70px; height:65px; top:-32px; left:35px; }
.cloud-3::after  { width:85px; height:75px; top:-38px; left:70px; }
.cloud-4 { width:100px; height:35px; top:30%; left:-120px; animation:cloud-drift 32s linear 18s infinite; border-radius:30px; }
.cloud-4::before { width:45px; height:45px; top:-22px; left:20px; }
.cloud-4::after  { width:55px; height:50px; top:-24px; left:45px; }
.cloud-5 { width:130px; height:45px; top:18%; left:-150px; animation:cloud-drift 38s linear 22s infinite; border-radius:38px; }
.cloud-5::before { width:55px; height:55px; top:-28px; left:28px; }
.cloud-5::after  { width:70px; height:60px; top:-30px; left:58px; }
@keyframes cloud-drift {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(100vw + 320px)); }
}

/* ===== Screen system ===== */
.screen { display: none; flex-direction: column; min-height: 100vh; position: relative; z-index: 1; }
.screen.active { display: flex; }

/* ===== Screen 1: Start Menu ===== */
#screen-start {
    align-items: center; justify-content: center; text-align: center; padding: 40px 20px;
}
.start-container {
    background: rgba(255,255,255,.78); backdrop-filter: blur(12px);
    border-radius: 24px; padding: 48px 40px;
    max-width: 460px; width: 100%;
    box-shadow: 0 8px 40px rgba(0,0,0,.06), 0 2px 12px rgba(0,0,0,.04);
    animation: fadeInUp .5s ease-out;
}
.start-logo { font-size: 4rem; margin-bottom: 8px; animation: bounce-logo 2s ease-in-out infinite; }
@keyframes bounce-logo {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-10px); }
}
.start-title {
    font-size: 1.6rem; font-weight: 700; color: var(--text); margin-bottom: 8px;
}
.start-desc {
    font-size: .95rem; color: var(--text-muted); margin-bottom: 28px;
}
.start-input-group { margin-bottom: 20px; }
.start-input-group input {
    width: 100%; max-width: 280px; padding: 12px 18px;
    font-size: 1.05rem; font-family: var(--font);
    border: 2px solid var(--border); border-radius: 14px;
    outline: none; text-align: center; transition: border-color .2s;
    background: rgba(255,255,255,.6);
}
.start-input-group input:focus { border-color: var(--accent); }

.btn-primary {
    padding: 12px 40px; font-size: 1.05rem; font-family: var(--font);
    background: var(--accent); color: #fff; border: none;
    border-radius: 14px; cursor: pointer; transition: all .15s;
    font-weight: 600; letter-spacing: .03em;
}
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
.btn-primary:disabled { opacity: .4; cursor: not-allowed; transform: none; }

.start-hint { font-size: .78rem; color: var(--text-muted); margin-top: 14px; }

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===== Screen 2: Select Game ===== */
#screen-select {
    align-items: center; justify-content: center; text-align: center; padding: 40px 20px;
}
.select-container {
    background: rgba(255,255,255,.78); backdrop-filter: blur(12px);
    border-radius: 24px; padding: 40px 36px;
    max-width: 620px; width: 100%;
    box-shadow: 0 8px 40px rgba(0,0,0,.06), 0 2px 12px rgba(0,0,0,.04);
    animation: fadeInUp .5s ease-out;
}
.greeting-row {
    display: flex; align-items: center; justify-content: center;
    gap: 18px; flex-wrap: wrap; margin-bottom: 6px;
}
.select-greeting { font-size: 1.5rem; font-weight: 700; margin: 0; }
.select-greeting span { color: var(--accent); }

/* Mood options */
.mood-options { display: flex; gap: 8px; }
.mood-btn {
    padding: 5px 12px; font-size: .82rem; font-family: var(--font);
    border-radius: 20px; border: 2px solid transparent;
    cursor: pointer; transition: all .2s;
    background: rgba(255,255,255,.6);
}
.mood-happy { border-color: #f9d170; }
.mood-happy:hover, .mood-happy.active { background: #fffbe5; border-color: #f0b800; }
.mood-neutral { border-color: #c0c8d0; }
.mood-neutral:hover, .mood-neutral.active { background: #f0f2f4; border-color: #8a96a0; }
.mood-sad { border-color: #a0c4e8; }
.mood-sad:hover, .mood-sad.active { background: #eaf4ff; border-color: #6a9cc8; }

/* Mood response area */
.mood-response {
    text-align: center; margin-bottom: 4px; min-height: 40px;
    display: flex; align-items: center; justify-content: center;
}
.mood-bubble {
    display: inline-block; background: #fffef5;
    border: 2px solid #f0d060; border-radius: 18px;
    padding: 8px 20px; font-size: .9rem;
    color: #6b5a20; font-weight: 500;
    animation: fadeInUp .35s ease-out;
}
.mood-response img {
    height: 120px; border-radius: 12px;
    animation: fadeInUp .35s ease-out;
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
}

.select-prompt { font-size: .95rem; color: var(--text-muted); margin-bottom: 28px; }

.game-cards { display: flex; gap: 20px; margin-bottom: 24px; }
.game-card {
    flex: 1; background: rgba(255,255,255,.7);
    border: 2px solid transparent; border-radius: 18px;
    padding: 24px 16px; cursor: pointer;
    transition: all .2s; box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.game-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.game-card h3 { font-size: 1.15rem; margin: 10px 0 6px; }
.game-card p  { font-size: .82rem; color: var(--text-muted); }

.card-img {
    width: 80px; height: 80px; border-radius: 16px; margin: 0 auto;
    overflow: hidden; background: #f0eeeb;
}
.card-img img { width: 100%; height: 100%; object-fit: cover; }

.card-gomoku-icon {
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; background: #f5f0e8;
}
.card-chess-icon {
    display: flex; align-items: center; justify-content: center;
    font-size: 2.8rem; background: #f5e6c8;
    color: #8b4513;
}

.select-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.btn-secondary {
    padding: 10px 22px; font-size: .9rem; font-family: var(--font);
    background: rgba(255,255,255,.7); color: var(--text);
    border: 1px solid var(--border); border-radius: 12px;
    cursor: pointer; transition: all .15s;
}
.btn-secondary:hover { background: rgba(255,255,255,.95); }

.btn-ghost {
    padding: 10px 22px; font-size: .9rem; font-family: var(--font);
    background: none; color: var(--text-muted); border: none;
    cursor: pointer; transition: color .15s;
}
.btn-ghost:hover { color: var(--text); text-decoration: underline; }

/* ===== Screen 3: Game (common) ===== */
/* Header */
header {
    background: rgba(255,255,255,.82); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
    padding: 10px 20px; display: flex; align-items: center;
    gap: 14px; flex-wrap: wrap;
    box-shadow: var(--shadow);
}

.back-btn {
    padding: 6px 14px; font-size: .85rem; font-family: var(--font);
    background: none; border: 1px solid var(--border);
    border-radius: var(--radius); cursor: pointer;
    color: var(--text-muted); transition: all .15s;
}
.back-btn:hover { background: rgba(0,0,0,.04); color: var(--text); }

header h1 { font-size: 1.1rem; font-weight: 600; white-space: nowrap; }

.player-name { font-size: .85rem; color: var(--text-muted); margin-left: auto; }
.player-name span { color: var(--accent); font-weight: 600; }

nav { display: flex; gap: 4px; }

.tab-btn {
    padding: 5px 14px; border: 1px solid var(--border);
    background: rgba(255,255,255,.7); font-size: .82rem;
    font-family: var(--font); cursor: pointer; border-radius: var(--radius);
    transition: all .15s; color: var(--text);
}
.tab-btn:hover { background: rgba(255,255,255,.95); }
.tab-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Main */
main {
    flex: 1;
    max-width: 1350px; width: 100%;
    margin: 0 auto; padding: 16px 12px;
    position: relative; z-index: 1;
}
.game-layout { display: flex; gap: 14px; align-items: center; min-height: calc(100vh - 170px); }

/* Character sidebar */
.character-sidebar {
    width: 300px; flex-shrink: 0;
    display: flex; flex-direction: column;
    align-items: center; gap: 10px;
    align-self: center;
}
.character-stage { position: relative; display: flex; align-items: center; justify-content: center; }
.character-wrapper {
    position: relative; width: 280px; height: 520px;
    display: flex; align-items: center; justify-content: center;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,.12));
}
#character-img {
    width: 100%; height: 100%; object-fit: contain;
    animation: character-fanning 2.5s ease-in-out infinite;
    transform-origin: center bottom;
}
.character-placeholder {
    width: 280px; height: 520px;
    display: flex; align-items: center; justify-content: center;
    font-size: 6rem; background: rgba(255,255,255,.5);
    border-radius: 50%;
    animation: character-fanning 2.5s ease-in-out infinite;
    transform-origin: center bottom;
}
@keyframes character-fanning {
    0%,100% { transform: rotate(-2deg); }
    50%     { transform: rotate(2deg); }
}

/* Cheer */
.cheer-sparkles { position: absolute; inset: -20px; pointer-events: none; opacity: 0; }
.cheer-sparkles.active { opacity: 1; }
.cheer-sparkles .sparkle {
    position: absolute; font-size: 1.2rem;
    animation: sparkle-pop .7s ease-out forwards;
}
@keyframes sparkle-pop {
    0%   { transform: translate(0,0) scale(0); opacity:1; }
    100% { transform: translate(var(--tx),var(--ty)) scale(1.2); opacity:0; }
}
.character-wrapper.cheering #character-img,
.character-wrapper.cheering .character-placeholder {
    animation: character-cheer .4s ease-in-out 3;
}
@keyframes character-cheer {
    0%,100% { transform: translateY(0) rotate(0); }
    25%     { transform: translateY(-22px) rotate(-6deg); }
    75%     { transform: translateY(-22px) rotate(6deg); }
}

/* Speech bubble */
.speech-bubble {
    position: relative; background: rgba(255,255,255,.92);
    border: 2px solid var(--accent); border-radius: 16px;
    padding: 8px 16px; font-size: .9rem; font-weight: 600;
    color: var(--accent); text-align: center; min-width: 80px;
    opacity: 0; transform: translateY(5px);
    transition: opacity .3s, transform .3s;
}
.speech-bubble::after {
    content:''; position:absolute; top:-8px; left:50%;
    transform:translateX(-50%); width:0; height:0;
    border-left:8px solid transparent; border-right:8px solid transparent;
    border-bottom:8px solid rgba(255,255,255,.92);
}
.speech-bubble::before {
    content:''; position:absolute; top:-11px; left:50%;
    transform:translateX(-50%); width:0; height:0;
    border-left:10px solid transparent; border-right:10px solid transparent;
    border-bottom:10px solid var(--accent);
}
.speech-bubble.show { opacity: 1; transform: translateY(0); }

/* Game area */
.game-area { flex: 1; min-width: 0; }
.tab-content { display: none; }
.tab-content.active { display: block; }

.game-panel {
    background: var(--surface); backdrop-filter: blur(6px);
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 24px 20px; box-shadow: var(--shadow);
}
.game-stats { display: flex; gap: 28px; margin-bottom: 14px; font-size: 1rem; color: var(--text-muted); }
.game-stats strong { color: var(--text); font-weight: 600; }
.game-actions { display: flex; gap: 10px; margin-bottom: 18px; }
.game-actions button, .lb-tab-btn {
    padding: 8px 20px; border: 1px solid var(--border);
    background: rgba(255,255,255,.7); font-size: .9rem;
    font-family: var(--font); cursor: pointer; border-radius: var(--radius);
    transition: all .15s; color: var(--text);
}
.game-actions button:hover, .lb-tab-btn:hover { background: rgba(255,255,255,.95); }
.lb-tab-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* 连连看 */
.link-board { display: grid; gap: 5px; justify-content: center; margin: 0 auto; }
.link-tile {
    width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;
    border-radius: 10px; cursor: pointer; background: rgba(255,255,255,.7);
    border: 2px solid transparent;
    transition: border-color .12s, background .12s, transform .12s, box-shadow .12s;
    user-select: none; overflow: hidden; padding: 3px;
}
.link-tile img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; }
.link-tile:hover { background: rgba(255,255,255,.95); transform: scale(1.05); }
.link-tile.selected {
    border-color: var(--accent); background: rgba(180,220,240,.5);
    transform: scale(1.05); box-shadow: 0 0 14px rgba(90,154,181,.35);
}
.link-tile.matched { visibility: hidden; pointer-events: none; }
.link-tile.hint {
    border-color: var(--success); animation: hint-pulse .6s ease-in-out 3;
    box-shadow: 0 0 12px rgba(90,172,136,.45);
}
@keyframes hint-pulse {
    0%,100% { border-color: var(--success); }
    50% { border-color: transparent; }
}
.game-message { text-align: center; margin-top: 14px; font-size: 1.1rem; font-weight: 600; color: var(--success); min-height: 28px; }

/* 五子棋 */
#gomoku-board, #chess-board { display: block; margin: 0 auto; cursor: pointer; border-radius: var(--radius); max-width: 100%; height: auto; }

/* Difficulty select */
.difficulty-select {
    padding: 7px 14px; font-size: .85rem; font-family: var(--font);
    border: 1px solid var(--border); border-radius: var(--radius);
    background: rgba(255,255,255,.7); color: var(--text);
    cursor: pointer; outline: none;
}
.difficulty-select:focus { border-color: var(--accent); }

/* Leaderboard */
.lb-tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.leaderboard-list table { width: 100%; border-collapse: collapse; }
.leaderboard-list th, .leaderboard-list td {
    padding: 11px 16px; text-align: left; border-bottom: 1px solid var(--border); font-size: .95rem;
}
.leaderboard-list th { font-weight: 600; color: var(--text-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.leaderboard-list tbody tr:hover { background: rgba(200,220,240,.2); }
.leaderboard-list .rank { width: 50px; font-weight: 600; }
.leaderboard-list .rank-1 { color: #d4a017; }
.leaderboard-list .rank-2 { color: #888; }
.leaderboard-list .rank-3 { color: #b87333; }
.leaderboard-list .empty-msg { text-align: center; padding: 40px; color: var(--text-muted); font-size: .95rem; }

/* Right scene */
.right-scene {
    width: 170px; flex-shrink: 0; align-self: center;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.shinchan-shiro-img {
    width: 100%; height: auto; border-radius: 14px;
    animation: right-scene-float 3s ease-in-out infinite;
    filter: drop-shadow(0 6px 16px rgba(0,0,0,.1));
}
@keyframes right-scene-float {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-8px); }
}
.scene-hearts { font-size: 1rem; min-height: 20px; text-align: center; }
.scene-hearts .heart { animation: heart-float 1.2s ease-out forwards; display: inline-block; margin: 0 2px; }
@keyframes heart-float {
    0%   { transform: translateY(0) scale(0); opacity: 1; }
    100% { transform: translateY(-40px) scale(1.3); opacity: 0; }
}

/* ===== Leaderboard Modal ===== */
.modal { display: none; position: fixed; inset: 0; z-index: 300; align-items: center; justify-content: center; }
.modal.show { display: flex; }
.modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.25); }
.modal-content {
    position: relative; background: rgba(255,255,255,.95); backdrop-filter: blur(12px);
    border-radius: 20px; padding: 28px; width: 90%; max-width: 520px; max-height: 80vh;
    overflow-y: auto; box-shadow: 0 12px 48px rgba(0,0,0,.12);
    animation: fadeInUp .3s ease-out;
}
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.modal-header h2 { font-size: 1.3rem; }
.modal-close {
    width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid var(--border); background: #fff;
    font-size: 1.2rem; cursor: pointer; display: flex;
    align-items: center; justify-content: center; transition: all .15s;
}
.modal-close:hover { background: #f5f4f2; }

/* Music toggle */
.music-toggle {
    position: fixed; bottom: 24px; right: 24px;
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.85); backdrop-filter: blur(6px);
    font-size: 1.3rem; cursor: pointer; z-index: 200;
    box-shadow: var(--shadow); transition: all .15s;
    display: flex; align-items: center; justify-content: center;
}
.music-toggle:hover { background: rgba(255,255,255,.95); transform: scale(1.08); }
.music-toggle.playing { border-color: var(--accent); }

/* Footer */
footer { text-align: center; padding: 14px; color: var(--text-muted); font-size: .8rem; }

/* ===== Modal wide variant ===== */
.modal-wide { max-width: 600px; }

/* ===== Profile Modal ===== */
.profile-tabs {
    display: flex; gap: 6px; margin-bottom: 18px;
    border-bottom: 1px solid var(--border); padding-bottom: 10px;
}
.profile-tab-btn {
    padding: 7px 18px; font-size: .85rem; font-family: var(--font);
    border: none; background: none; cursor: pointer;
    border-radius: var(--radius); color: var(--text-muted);
    transition: all .15s;
}
.profile-tab-btn:hover { background: #f0efed; }
.profile-tab-btn.active { background: var(--accent); color: #fff; }

.profile-tab-content { display: none; }
.profile-tab-content.active { display: block; }

.profile-section { margin-bottom: 20px; }
.profile-section h3 { font-size: .95rem; margin-bottom: 10px; color: var(--text); }

/* Avatar grid */
.avatar-grid { display: flex; gap: 12px; flex-wrap: wrap; }
.avatar-option {
    width: 64px; height: 64px; border-radius: 50%;
    overflow: hidden; cursor: pointer;
    border: 3px solid transparent; transition: all .15s;
    background: #f0eeeb;
}
.avatar-option img { width: 100%; height: 100%; object-fit: cover; }
.avatar-option:hover { transform: scale(1.08); }
.avatar-option.selected { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(90,154,181,.25); }

/* Score cards */
.profile-scores { display: flex; gap: 14px; }
.score-card {
    flex: 1; background: #f8f7f4; border-radius: 12px;
    padding: 14px 18px; text-align: center;
}
.score-label { display: block; font-size: .8rem; color: var(--text-muted); margin-bottom: 4px; }
.score-value { display: block; font-size: 1.4rem; font-weight: 700; color: var(--accent); }

/* Publish form */
.publish-form textarea {
    width: 100%; height: 100px; padding: 12px;
    border: 1px solid var(--border); border-radius: var(--radius);
    font-size: .9rem; font-family: var(--font); resize: vertical;
    outline: none; background: rgba(255,255,255,.6);
}
.publish-form textarea:focus { border-color: var(--accent); }
.publish-toolbar {
    display: flex; align-items: center; gap: 12px;
    margin-top: 10px; flex-wrap: wrap;
}
.publish-img-btn {
    padding: 6px 14px; font-size: .85rem; font-family: var(--font);
    border: 1px solid var(--border); border-radius: var(--radius);
    background: rgba(255,255,255,.7); cursor: pointer;
    transition: all .15s;
}
.publish-img-btn:hover { background: #f0efed; }

/* ===== Post cards ===== */
.community-feed { max-height: 60vh; overflow-y: auto; padding-right: 4px; }

.post-card {
    background: #fff; border: 1px solid var(--border);
    border-radius: 14px; padding: 16px; margin-bottom: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,.03);
}
.post-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.post-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    overflow: hidden; background: #f0eeeb; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
}
.post-avatar-img { width: 100%; height: 100%; object-fit: cover; }
.post-meta { flex: 1; }
.post-author { display: block; font-weight: 600; font-size: .9rem; }
.post-time  { display: block; font-size: .75rem; color: var(--text-muted); }
.post-delete {
    width: 26px; height: 26px; border-radius: 50%;
    border: 1px solid #e0d0d0; background: #fff;
    font-size: .75rem; cursor: pointer; color: #c88;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s;
}
.post-delete:hover { background: #fef0f0; }

.post-body { margin-bottom: 10px; }
.post-text { font-size: .9rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.post-image-wrap { margin-top: 8px; }
.post-image { max-width: 100%; max-height: 300px; border-radius: 10px; object-fit: contain; }

.post-actions { margin-bottom: 8px; }
.post-like-btn {
    padding: 4px 12px; font-size: .85rem; font-family: var(--font);
    border: none; background: none; cursor: pointer;
    border-radius: 20px; transition: all .15s;
}
.post-like-btn:hover { background: #fef0f0; }
.post-like-btn.liked { color: #e55; }

/* Comments */
.post-comments { border-top: 1px solid #eee; padding-top: 8px; }
.post-comments-list { margin-bottom: 6px; }
.comment-item {
    font-size: .82rem; padding: 3px 0; color: #555;
    line-height: 1.4;
}
.comment-item strong { color: var(--accent); }
.comment-time { font-size: .7rem; color: #bbb; margin-left: 4px; }

.post-comment-form { display: flex; gap: 6px; }
.post-comment-input {
    flex: 1; padding: 6px 10px;
    border: 1px solid var(--border); border-radius: 20px;
    font-size: .82rem; font-family: var(--font); outline: none;
    background: rgba(255,255,255,.5);
}
.post-comment-input:focus { border-color: var(--accent); }
.post-comment-submit {
    padding: 5px 14px; font-size: .8rem; font-family: var(--font);
    border: none; background: var(--accent); color: #fff;
    border-radius: 20px; cursor: pointer; transition: all .15s;
}
.post-comment-submit:hover { background: var(--accent-hover); }

/* Scrollbar for feed */
.community-feed::-webkit-scrollbar { width: 5px; }
.community-feed::-webkit-scrollbar-thumb { background: #d0d4d8; border-radius: 10px; }

/* ===== Responsive ===== */
@media (max-width: 1050px) {
    .right-scene { display: none; }
    main { max-width: 1000px; }
}
@media (max-width: 750px) {
    .game-layout { flex-direction: column; align-items: center; }
    .character-sidebar { width: 100%; flex-direction: row; justify-content: center; gap: 14px; }
    .character-wrapper { width: 110px; height: 200px; }
    .character-placeholder { width: 110px; height: 200px; font-size: 3.5rem; }
    .speech-bubble { font-size: .8rem; padding: 6px 12px; }
    .game-panel { padding: 14px; }
    .game-stats { gap: 12px; font-size: .85rem; flex-wrap: wrap; }
    .link-tile { width: 48px; height: 48px; }
    .right-scene { display: none; }
    .game-cards { flex-direction: column; }
}
@media (max-width: 500px) {
    header { padding: 8px 10px; gap: 6px; }
    header h1 { font-size: .95rem; }
    nav { width: 100%; }
    nav .tab-btn { flex: 1; text-align: center; font-size: .75rem; padding: 5px 8px; }
    .link-tile { width: 38px; height: 38px; }
    .link-board { gap: 3px; }
    .game-panel { padding: 10px; }
    .start-container, .select-container { padding: 28px 20px; }
    .start-title { font-size: 1.3rem; }
    .modal-content { padding: 18px; width: 95%; }
    .modal-wide { max-width: 100%; }
    .profile-scores { flex-direction: column; }
}