body{margin:0;min-height:100vh;background:#000;display:flex;justify-content:center;align-items:center;overflow:hidden}#game-container{width:1280px;height:720px;position:relative;flex-shrink:0}.persona-arrow{position:absolute;top:318px;width:56px;height:56px;border-radius:50%;background:#0009;border:2px solid var(--persona-color, #FBBF24);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:12;transition:background .2s,transform .2s,box-shadow .2s;padding:0;outline:none}.persona-arrow--left{left:24px}.persona-arrow--right{right:24px}.persona-arrow:hover{background:#000c;transform:scale(1.1);box-shadow:0 0 16px var(--persona-color, #FBBF24)}.persona-arrow:active{transform:scale(.95)}.arrow-triangle{width:0;height:0;border-style:solid;border-color:transparent}.persona-arrow--left .arrow-triangle{border-width:8px 12px 8px 0;border-right-color:var(--persona-color, #FBBF24);margin-right:2px}.persona-arrow--right .arrow-triangle{border-width:8px 0 8px 12px;border-left-color:var(--persona-color, #FBBF24);margin-left:2px}.arrow-hint{position:absolute;top:110%;left:50%;transform:translate(-50%);white-space:nowrap;background:#000000b3;color:var(--persona-color, #FBBF24);padding:4px 8px;border-radius:6px;font-size:12px;font-family:Noto Sans TC,sans-serif;opacity:0;pointer-events:none;transition:opacity .2s}.persona-arrow:hover .arrow-hint{opacity:1}#chat-root{position:absolute;top:320px;left:0;width:1280px;height:400px;background:#0f1428d1;backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);border-top:1px solid rgba(255,215,100,.25);box-shadow:0 -4px 24px #7850c82e;z-index:10;display:flex;flex-direction:column;overflow:hidden;font-family:Noto Sans TC,sans-serif}:where(#game-container){--persona-color: #FBBF24}.persona-ci_yang{--persona-color: #FBBF24}.persona-pink{--persona-color: #C084FC}.persona-claire{--persona-color: #60A5FA}.chat-banner{position:absolute;top:24px;left:24px;width:220px;height:40px;padding:0 16px;display:flex;align-items:center;background:#00000080;border:1px solid color-mix(in srgb,var(--persona-color, #FBBF24) 40%,transparent);border-radius:10px;color:var(--persona-color, #FBBF24);font-family:Noto Sans TC,sans-serif;font-size:18px;font-weight:600;z-index:11;pointer-events:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:color .3s,border-color .3s}.persona-ci_yang .chat-banner{border-color:#fbbf2466}.persona-pink .chat-banner{border-color:#c084fc66}.persona-claire .chat-banner{border-color:#60a5fa66}.chat-messages{flex:1;height:340px;overflow-y:auto;scroll-behavior:smooth;padding:12px 16px;display:flex;flex-direction:column;gap:8px;background:transparent}.chat-messages::-webkit-scrollbar{width:4px}.chat-messages::-webkit-scrollbar-track{background:transparent}.chat-messages::-webkit-scrollbar-thumb{background:#ffd76433;border-radius:2px}.bubble-user{align-self:flex-end;max-width:70%;padding:10px 14px;background:#e8d8b42e;border:1px solid rgba(232,216,180,.4);border-radius:16px 16px 4px;color:#f0e8d0;font-size:16px;line-height:1.5;word-break:break-word}.bubble-assistant{align-self:flex-start;max-width:70%;padding:10px 14px;background:#1e143299;border-left:3px solid var(--persona-color, #FBBF24);border-radius:16px 16px 16px 4px;color:#e8e8f0;font-size:16px;line-height:1.5;word-break:break-word}.bubble-typing{align-self:flex-start;padding:12px 16px;background:#1e143299;border-left:3px solid var(--persona-color, #FBBF24);border-radius:16px 16px 16px 4px;display:inline-flex;align-items:center;gap:6px}.bubble-typing .dot{width:8px;height:8px;border-radius:50%;background:var(--persona-color, #FBBF24);animation:typing-bounce 1.2s infinite ease-in-out}.bubble-typing .dot:nth-child(2){animation-delay:.15s}.bubble-typing .dot:nth-child(3){animation-delay:.3s}@keyframes typing-bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-6px)}}.bubble-error{align-self:center;max-width:80%;padding:10px 14px;background:#50141ebf;border:1px solid rgba(250,56,56,.5);border-radius:8px;box-shadow:0 0 8px #f333;color:#fca5a5;font-size:14px;text-align:center}#chat-input-bar{height:52px;display:flex;align-items:center;gap:8px;padding:8px 16px;background:#0f0c23e6;border-top:1px solid rgba(255,215,100,.2);flex-shrink:0}#chat-input-field{flex:1;height:36px;padding:0 16px;background:#0000004d;border:1px solid rgba(232,216,180,.2);border-radius:18px;color:#f0e8d0;font-family:inherit;font-size:16px;outline:none;transition:border-color .15s,box-shadow .15s}#chat-input-field::placeholder{color:#e8d8b480}#chat-input-field:focus{border-color:#ffd76499;box-shadow:0 0 0 2px #fbbf2433}#chat-send-btn{width:36px;height:36px;border-radius:50%;background:var(--persona-color, #FBBF24);box-shadow:0 0 8px color-mix(in srgb,var(--persona-color, #FBBF24) 35%,transparent);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#0f0c23;font-size:18px;flex-shrink:0;transition:filter .15s}#chat-send-btn:hover{filter:brightness(1.15)}#chat-send-btn:disabled{opacity:.35;cursor:not-allowed}.feedback-cta{position:fixed;right:20px;bottom:20px;z-index:13;padding:8px 14px;border-radius:18px;background:#0f1428d9;border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px);color:#fbbf24;font-size:12px;font-weight:500;text-decoration:none;letter-spacing:.5px;transition:transform .15s,background .15s}.feedback-cta:hover{transform:translateY(-1px);background:#0f1428f2}.feedback-cta:active{transform:translateY(0)}.mobile-gate{position:fixed;inset:0;z-index:100;background:linear-gradient(180deg,#0f1428,#1a1230);display:flex;align-items:center;justify-content:center;padding:24px;color:#e5e7eb;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,Noto Sans TC,sans-serif;text-align:center}.mobile-gate__inner{max-width:360px}.mobile-gate__title{font-size:28px;font-weight:700;color:#fbbf24;margin-bottom:12px;letter-spacing:1px}.mobile-gate__personas{font-size:14px;color:#c77dff;margin-bottom:32px;letter-spacing:2px}.mobile-gate__notice{font-size:16px;line-height:1.6;color:#e5e7ebd9;padding:16px 20px;border:1px solid rgba(255,215,100,.25);border-radius:8px;background:#0f142899}