:root{--bg-color: #f5f5f5;--text-primary: #333333;--text-secondary: #666666;--danger-color: #d32f2f;--accent-color: #1976d2;--success-color: #2e7d32;--border-color: #e0e0e0;--placeholder-bg: #e0e0e0;--placeholder-border: #9e9e9e}*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,system-ui,-apple-system,sans-serif}body{background-color:#050505;color:var(--text-primary);display:flex;justify-content:center;align-items:center;min-height:100vh;margin:0}#root{width:100%;min-height:100vh;background-color:transparent;display:flex;justify-content:center}.mobile-layout{width:100%;max-width:430px;height:100vh;height:100dvh;background-color:var(--bg-color);position:relative;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 0 20px #00000080}.teacher-layout{width:100vw;height:100vh;margin:0;padding:0;position:relative;background-color:#000;overflow:hidden}.bg-cover-center{background-size:cover;background-position:center;background-repeat:no-repeat}.status-bar{height:10%;min-height:60px;background-color:#f0f0f0;display:flex;justify-content:space-between;align-items:center;padding:0 20px;box-shadow:0 2px 4px #0000001a;z-index:10;font-weight:600}.image-placeholder{height:35%;background-color:var(--placeholder-bg);border:2px dashed var(--placeholder-border);display:flex;justify-content:center;align-items:center;color:var(--text-secondary);font-weight:500;margin:10px}.narrative-area{flex:1;padding:20px;overflow-y:auto;line-height:1.6;font-size:1.1rem}.action-area{padding:15px;background-color:#fff;box-shadow:0 -2px 10px #0000000d;display:flex;flex-direction:column;gap:15px}button{min-height:60px;padding:15px;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;background-color:#fff;color:var(--text-primary);border:1px solid var(--border-color);box-shadow:0 2px 4px #0000000d;display:flex;justify-content:center;align-items:center;text-align:center}button:hover:not(:disabled){background-color:#f8f9fa;transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}button:active:not(:disabled){transform:translateY(0)}button:disabled{opacity:.6;cursor:not-allowed;background-color:#f5f5f5}.btn-danger{background-color:var(--danger-color);color:#fff;border:none}.btn-danger:hover:not(:disabled){background-color:#b71c1c}.btn-primary{background-color:var(--accent-color);color:#fff;border:none}.btn-primary:hover:not(:disabled){background-color:#1565c0}.text-danger{color:var(--danger-color);font-weight:700}.text-center{text-align:center}.mb-4{margin-bottom:1rem}.mt-4{margin-top:1rem}.novel-dialogue{background-color:#000000bf;border-top:2px solid rgba(255,255,255,.2);border-bottom:2px solid rgba(255,255,255,.2);color:#e0e0e0;padding:25px;line-height:1.8;font-size:1.15rem;box-shadow:0 -4px 20px #000c;font-family:"Noto Serif TC",serif;text-shadow:1px 1px 2px black;white-space:pre-line}body{background-color:#050505}#root{color:#fff}.status-bar{background-color:#1e1e1ecc!important;color:#ccc;border-bottom:1px solid #333}.action-area{background-color:#0f0f0fe6!important;border-top:1px solid #333}button{background-color:#141414cc!important;color:#ddd!important;border:1px solid #555!important}button:hover:not(:disabled){background-color:#282828e6!important;border-color:#888!important}.btn-primary{background-color:#8c141499!important;border-color:#8c1414!important}.btn-primary:hover:not(:disabled){background-color:#b41414cc!important}.card-container{perspective:1000px;width:65vw;max-width:250px;aspect-ratio:1 / 1.45;margin:0 auto}.card{width:100%;height:100%;position:relative;transition:transform .8s;transform-style:preserve-3d;cursor:pointer}.card.is-flipped{transform:rotateY(180deg)}.card-face{position:absolute;width:100%;height:100%;backface-visibility:hidden;background-size:contain;background-repeat:no-repeat;background-position:center;border-radius:12px;box-shadow:0 10px 30px #000c}.card-back{background-image:url(/image/c00.png)}.card-front{transform:rotateY(180deg)}