:root { color-scheme:dark; --bg:#0c1217; --panel:#152029; --ink:#f4f6ee; --muted:#abb9bd; --quiet:#809298; --line:#344852; --accent:#c8ec8e; --accent-soft:#a3c77b; --serif:Georgia,'Songti SC',serif; --sans:Inter,-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif; }
* { box-sizing:border-box; }
html { min-height:100%; }
body { margin:0; min-height:100vh; background:radial-gradient(ellipse at 82% 12%,#233c38 0%,transparent 40%),radial-gradient(ellipse at 5% 90%,#223344 0%,transparent 45%),var(--bg); color:var(--ink); font-family:var(--sans); line-height:1.7; }
.grain { position:fixed; inset:0; opacity:.12; pointer-events:none; z-index:5; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E"); }
.shell { width:min(1050px,100%); margin:0 auto; padding:0 clamp(20px,5vw,64px); min-height:100vh; display:flex; flex-direction:column; }
.masthead { height:92px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); gap:14px; }
.wordmark { font-size:16px; letter-spacing:.24em; font-weight:700; text-decoration:none; color:var(--ink); white-space:nowrap; }
.wordmark span { letter-spacing:.1em; color:var(--accent); font-weight:400; font-size:14px; }
.connection { font-size:12px; color:var(--quiet); text-align:right; }
.connection.online::before,.connection.offline::before { content:''; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--accent); margin-right:8px; }
.connection.offline::before { background:#eeac83; }
main { flex:1; display:flex; flex-direction:column; justify-content:center; padding:48px 0 68px; min-width:0; }
.footer { display:flex; justify-content:space-between; gap:12px; padding:22px 0 28px; border-top:1px solid var(--line); color:var(--quiet); font-size:11px; letter-spacing:.08em; }
h1,h2,h3,p { margin-top:0; }
.eyebrow { font-size:11px; font-weight:700; letter-spacing:.23em; color:var(--accent); margin:0 0 21px; }
.hero { max-width:750px; animation:rise .5s ease both; }
.hero h1 { font-family:Georgia,serif; font-weight:700; letter-spacing:.13em; line-height:1; font-size:clamp(75px,13vw,146px); margin:0 0 8px -6px; }
.hero .chinese { font-size:clamp(32px,5vw,54px); font-weight:600; letter-spacing:.19em; color:var(--accent); margin:0 0 35px; }
.hero .intro { font-size:clamp(20px,3vw,30px); font-weight:600; line-height:1.6; }
.hero .motto { color:var(--muted); font-size:16px; margin:10px 0 28px; }
.howto { display:flex; flex-wrap:wrap; gap:10px; margin:48px 0 23px; }
.howto span { border:1px solid var(--line); background:#1b3031a6; padding:9px 13px; border-radius:100px; font-size:12px; color:var(--accent); }
.actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:26px; }
button { font:inherit; cursor:pointer; min-height:47px; padding:10px 22px; border-radius:8px; border:1px solid var(--accent); background:var(--accent); color:#132017; font-weight:700; font-size:14px; transition:background .2s,transform .2s,border .2s; }
button:hover:not(:disabled) { transform:translateY(-2px); background:#dbffa5; border-color:#dbffa5; }
button:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
button:disabled { opacity:.48; cursor:not-allowed; }
button.secondary { color:var(--ink); background:transparent; border-color:#577078; font-weight:500; }
button.secondary:hover:not(:disabled) { background:#26353c; border-color:#7a9697; }
button.text-button { background:transparent; border:0; color:var(--muted); padding:8px 0; min-height:0; font-size:13px; font-weight:500; }
button.text-button:hover:not(:disabled) { color:var(--accent); background:transparent; }
button.danger { color:#d9aaa3; }
.note { color:var(--muted); font-size:13px; line-height:1.9; }
.hero > .note:last-child,.card > .note:last-child { border-top:1px solid var(--line); margin-top:26px; padding-top:15px; font-size:12px; color:#b9c4c5; }
.card { width:min(100%,660px); animation:rise .4s ease both; }
.card h1,.end h1 { font-weight:650; font-size:clamp(28px,4vw,44px); line-height:1.4; letter-spacing:.01em; margin-bottom:19px; }
.card h2 { font-size:25px; font-weight:600; }
label { display:block; color:var(--muted); margin:26px 0 8px; font-size:12px; letter-spacing:.1em; }
input,textarea { width:100%; border:1px solid var(--line); border-radius:8px; padding:14px 16px; font:16px/1.65 var(--sans); color:var(--ink); background:#101a21; outline:none; transition:border .2s; }
input:focus,textarea:focus { border-color:var(--accent-soft); }
input::placeholder,textarea::placeholder { color:#748991; }
textarea { min-height:90px; resize:vertical; }
.room-code { font-size:clamp(27px,5vw,44px); letter-spacing:.22em; font-family:Georgia,serif; color:var(--accent); margin:8px 0; user-select:all; }
.room-box,.approval { border:1px solid var(--line); border-radius:12px; padding:23px 27px; margin:25px 0; background:#172830c9; }
.approval { border-color:#b9dc88; }
.badges { display:flex; flex-wrap:wrap; gap:9px; margin:22px 0; }
.badge { border:1px solid var(--line); border-radius:100px; color:var(--muted); font-size:12px; padding:5px 13px; }
.badge.ready { color:var(--accent); border-color:#678461; }
.play-screen { width:min(100%,800px); margin:0 auto; animation:rise .35s ease both; }
.progress { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:11px; letter-spacing:.14em; color:var(--muted); margin-bottom:15px; }
.progress-line { width:100%; height:2px; background:var(--line); margin-bottom:23px; }
.progress-line span { display:block; height:2px; background:var(--accent); }
.topic-card { background:linear-gradient(130deg,#1d3835,#1c2b35 65%,#18232d); padding:clamp(20px,4vw,32px); border:1px solid #426456; border-radius:16px; box-shadow:0 16px 40px #07101245; }
.topic-type { display:inline-flex; border:1px solid #6a9878; border-radius:100px; padding:3px 12px; color:var(--accent); font-size:12px; }
.topic-type.deep { border-color:#af8eaa; color:#e1b8dd; }
.topic-card .question-title { font-size:clamp(20px,3vw,29px); line-height:1.6; font-weight:550; margin:20px 0 13px; }
.topic-card .text-button { color:#cae7c0; }
.chat-board { margin:16px 0 14px; padding:19px; min-height:176px; max-height:min(43vh,400px); overflow-y:auto; background:#111d25bf; border:1px solid var(--line); border-radius:14px; scroll-behavior:smooth; }
.chat-board > .note { text-align:center; margin:34px 10px; }
.chat-line { display:flex; margin:10px 0; }
.chat-line.mine { justify-content:flex-end; }
.chat-bubble { max-width:min(85%,550px); border:1px solid #425561; border-radius:14px 14px 14px 3px; background:#24343e; padding:10px 15px; }
.mine .chat-bubble { border-color:#658763; border-radius:14px 14px 3px 14px; background:#2b4338; }
.chat-author { display:block; color:var(--accent); font-size:11px; margin-bottom:5px; }
.chat-text { white-space:pre-wrap; overflow-wrap:anywhere; font-size:15px; line-height:1.7; margin:0; }
.turn-status { font-size:13px; font-weight:650; color:var(--accent); margin:4px 0 10px; }
.composer { display:flex; align-items:flex-end; gap:12px; }
.composer textarea { flex:1; }
.composer textarea:disabled { opacity:.65; }
.composer .actions { margin:0; flex-shrink:0; }
.play-controls { border-top:1px solid var(--line); margin-top:24px; padding-top:18px; display:flex; align-items:center; flex-wrap:wrap; gap:13px 23px; }
.play-controls .note { width:100%; margin:0; }
.end { width:min(100%,760px); animation:rise .4s ease both; }
.book { margin-top:42px; }
.book-entry { border-top:1px solid var(--line); padding:22px 0; }
.book-entry .meta { color:var(--accent); font-size:11px; margin-bottom:8px; }
.book-entry h3 { font-weight:500; font-size:15px; color:var(--muted); }
.book-entry p { font-size:16px; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.8; }
.toast { position:fixed; bottom:24px; left:50%; transform:translate(-50%,20px); padding:10px 18px; background:#354149; color:#fff; border:1px solid #73818a; border-radius:8px; opacity:0; pointer-events:none; transition:opacity .2s,transform .2s; z-index:10; font-size:13px; max-width:calc(100vw - 40px); }
.toast.visible { opacity:1; transform:translate(-50%,0); }
@keyframes rise { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:600px) { .masthead { height:70px; } main { padding:29px 0 55px; justify-content:flex-start; } .hero { padding-top:25px; } .footer span:last-child { display:none; } .composer { display:block; } .composer .actions { margin-top:9px; justify-content:flex-end; } .composer textarea { min-height:76px; } .chat-board { max-height:38vh; } .room-box,.approval { padding:18px; } .actions button { flex:1 1 auto; } .topic-card { padding:20px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }