body { margin: 0; background: #000; overflow: hidden; font-family: sans-serif; cursor: crosshair; touch-action: none; }

#system-meta {
    position: absolute; top: 20px; right: 20px;
    color: rgba(255, 68, 0, 0.7); font-size: 10px; line-height: 1.5;
    text-align: right; pointer-events: none; z-index: 100; font-family: monospace;
}

/* 默认容器逻辑 */
#ui-desktop, #ui-mobile {
    position: absolute; width: 100%; text-align: center;
    z-index: 100; display: flex; justify-content: center; align-items: center; gap: 15px;
}
#ui-desktop { bottom: 40px; }
#ui-mobile { display: none; } /* 默认电脑端隐藏 */

#hint { position: absolute; top: 20px; left: 20px; color: rgba(255, 100, 0, 0.8); font-size: 12px; z-index: 150; }
#hint a {
    color: #ffaa00; text-decoration: none; border-bottom: 1px dotted #ff4400;
    cursor: pointer; transition: 0.3s; pointer-events: auto;
}
#hint a:hover { color: #fff; border-bottom: 1px solid #fff; text-shadow: 0 0 10px #ff4400; }

/* --- 核心修复：手机端响应式强制覆盖 --- */
@media (max-width: 768px) {
    #ui-desktop { display: none !important; } /* 物理隐藏桌面端 */
    
    #ui-mobile { 
        display: flex !important; 
        flex-direction: column !important; 
        bottom: 15% !important; /* 向上移动，避开手机浏览器底部操作栏 */
        gap: 15px;
        width: 100%;
        left: 0;
    }
    
    /* 强制重置手机端控件大小，防止缩小感 */
    #ui-mobile input, #ui-mobile button { 
        width: 85% !important; 
        max-width: 320px !important; 
        padding: 16px 20px !important; 
        box-sizing: border-box !important; /* 确保 padding 不撑破宽度 */
        font-size: 16px !important; /* 适中的手机字体 */
    }

    #ui-mobile button {
        border-radius: 50px; /* 手机端圆角更明显 */
    }
    
    #poem-display { top: 35% !important; transform: translate(-50%, -50%) !important; }
    .poem-line { 
        font-size: 20px !important; 
        margin: 8px 0 !important; 
        width: 85vw !important;
        text-wrap: balance !important; 
        line-height: 1.4 !important;
    }
    .karma-error { font-size: 30px !important; }
    
    #system-meta { top: 15px; right: 15px; font-size: 9px; }
    #hint { top: 15px; left: 15px; font-size: 9px; text-align: left; max-width: 150px; line-height: 1.4; pointer-events: none; }
    #hint a { pointer-events: auto; }
}

@keyframes glow {
    from { box-shadow: 0 0 10px rgba(255, 68, 0, 0.3); border-color: #ff4400; }
    to { box-shadow: 0 0 30px rgba(255, 68, 0, 0.7); border-color: #ffaa00; }
}

input {
    padding: 18px 30px; width: 220px; border: 2px solid #ff4400;
    background: rgba(30, 0, 0, 0.9); color: #fff; outline: none; border-radius: 40px;
    font-size: 18px; text-align: center; backdrop-filter: blur(10px);
    box-shadow: 0 0 30px rgba(255, 68, 0, 0.5);
    animation: glow 3s infinite alternate;
}

button {
    padding: 18px 30px; background: linear-gradient(45deg, #ff0000, #ffaa00); color: white; border: none;
    cursor: pointer; font-weight: bold; border-radius: 40px;
    font-size: 16px; transition: 0.4s; box-shadow: 0 0 40px rgba(255, 68, 0, 0.6);
    -webkit-tap-highlight-color: transparent; /* 移除移动端点击蓝框 */
}
button:hover { transform: scale(1.1); box-shadow: 0 0 60px #ffaa00; }
button:disabled { opacity: 0.3; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

#poem-display {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    color: #ffffff; text-align: center; pointer-events: none; z-index: 200;
    text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 40px rgba(255,255,255,0.6);
    font-style: italic; line-height: 1.6; max-width: 90%;
}
.poem-line {
    opacity: 0; 
    filter: blur(10px); 
    margin: 10px 0; 
    font-size: 28px; 
    transition: filter 0.5s;
    text-wrap: balance;         /* 自动平衡行宽，防止孤词 */
    word-break: keep-all;      /* 尽量不打断单词内部 */
    overflow-wrap: break-word; /* 如果单词实在太长才允许打断 */
    max-width: 800px;          /* 限制最大宽度，让长句有换行的理由 */
    margin-left: auto;         /* 配合居中 */
    margin-right: auto;
}

.karma-error {
    color: #ff0000 !important; font-weight: 900 !important; font-size: 50px !important;
    text-transform: uppercase;
    text-shadow: 0 0 15px #ff0000, 0 0 30px #ff0000, 0 0 60px #ff0000, 0 0 100px #ff0000, 0 0 150px #ff0000 !important;
    animation: glitch 0.1s infinite !important;
}

@keyframes glitch {
    0% { transform: translate(0); }
    25% { transform: translate(-3px, 2px); }
    50% { transform: translate(3px, -2px); }
    75% { transform: translate(-3px, -2px); }
    100% { transform: translate(3px, 2px); }
}