:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f7f4ed;background:#111217;line-height:1.5}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at top,#242638,#111217 55%);min-height:100vh}.wrap{max-width:1100px;margin:auto;padding:28px 18px 60px}
header{display:flex;align-items:baseline;gap:12px;margin-bottom:22px}.logo{font-size:30px;font-weight:900;letter-spacing:.12em}.sub{color:#9ca0b4;font-size:12px;letter-spacing:.15em}
.card{background:#1a1c25;border:1px solid #343747;border-radius:18px;padding:22px;box-shadow:0 15px 50px #0005;margin-bottom:16px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.center{text-align:center}.muted{color:#a7abba}.small{font-size:13px}
input,select,button{font:inherit;border-radius:11px;border:1px solid #424657;background:#101118;color:#fff;padding:11px 13px}input{width:100%}button{cursor:pointer;background:#e9d36b;color:#171717;font-weight:800;border:0}button.secondary{background:#303442;color:#fff}button.danger{background:#d85d5d;color:#fff}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.row>*{flex:1}.code{font-size:34px;font-weight:900;letter-spacing:.15em}.room{font-size:28px;font-weight:900;letter-spacing:.2em}.players{display:grid;grid-template-columns:1fr 1fr;gap:10px}.player{padding:12px;background:#12141b;border:1px solid #323645;border-radius:12px}.teamA{border-left:4px solid #70a9ff}.teamB{border-left:4px solid #ff7d96}.pill{display:inline-block;padding:3px 8px;border-radius:99px;background:#343747;font-size:12px}.keygrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.key{background:#11131a;border:1px solid #464a5c;padding:18px 10px;border-radius:14px;text-align:center}.key b{display:block;font-size:12px;color:#a7abba;margin-bottom:6px}.key span{font-size:18px;font-weight:800}.phase{font-weight:900;color:#e9d36b}.notice{padding:12px 14px;background:#262938;border-radius:12px;margin:10px 0}.history{display:grid;gap:7px}.history div{background:#11131a;border-radius:10px;padding:9px}.score{display:flex;gap:12px}.score .box{flex:1;padding:15px;border-radius:13px;background:#12141b;text-align:center}.box strong{font-size:28px;display:block}.tabs{display:flex;gap:7px;margin-bottom:15px}.tabs button{background:#292c38;color:#fff}.tabs button.active{background:#e9d36b;color:#111}.clues{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.clues input{font-size:17px}.guess{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.guess select{width:100%}@media(max-width:720px){.grid,.players{grid-template-columns:1fr}.keygrid{grid-template-columns:repeat(2,1fr)}.clues,.guess{grid-template-columns:1fr}.wrap{padding:18px 12px}}

/* Beginner rules modal */
header{justify-content:space-between;gap:16px}.help-btn{white-space:nowrap;padding:10px 14px;background:#303442;color:#fff;border:1px solid #4a4e60}.help-btn:hover{filter:brightness(1.12)}
.modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:18px}.modal.hidden{display:none}.modal-backdrop{position:absolute;inset:0;background:#05060bcc;backdrop-filter:blur(5px)}.modal-card{position:relative;width:min(850px,100%);max-height:min(92vh,900px);background:#181a23;border:1px solid #414557;border-radius:22px;box-shadow:0 30px 100px #0009;overflow:hidden;display:flex;flex-direction:column}.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;padding:22px 24px 16px;border-bottom:1px solid #303342}.modal-head h2{margin:4px 0 0;font-size:25px}.close-btn{flex:0 0 auto;width:42px;height:42px;padding:0;border-radius:50%;background:#2b2e3a;color:#fff;font-size:28px;line-height:1}.rules-scroll{overflow:auto;padding:20px 24px 30px}.rule-section{padding:18px 0;border-bottom:1px solid #2c2f3c}.rule-section:first-child{padding-top:0}.rule-section:last-child{border-bottom:0}.rule-section h3{margin:0 0 8px;font-size:19px}.rule-section p{margin:7px 0;color:#d7d8df}.rule-section.intro{background:#222532;border:1px solid #35394a;border-radius:15px;padding:16px;margin-bottom:2px}.rule-section.quick{background:#20232f;border:1px solid #3c4051;border-radius:15px;padding:18px;margin-top:18px}.example-board{background:#101219;border:1px solid #393d4d;border-radius:15px;padding:15px;margin-top:13px}.board-title{text-align:center;color:#aeb2c1;font-size:12px;margin-bottom:10px}.example-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.example-keys>div{padding:14px 8px;border-radius:12px;background:#1c1f2a;text-align:center;border:1px solid #373b4b}.example-keys b{display:block;color:#e9d36b;font-size:12px;margin-bottom:6px}.example-keys span{font-size:16px;font-weight:800}.flow-card{background:#101219;border-radius:15px;border:1px solid #393d4d;padding:18px;text-align:center;margin-top:13px}.code-big{font-size:30px;font-weight:900;letter-spacing:.08em}.arrow{font-size:25px;color:#e9d36b;margin:7px 0}.mapped{display:flex;justify-content:center;gap:9px;flex-wrap:wrap}.mapped span{background:#252936;border-radius:10px;padding:8px 12px;font-weight:700}.clue-example{display:flex;gap:10px;flex-wrap:wrap;margin:13px 0 4px}.clue-chip{padding:12px 16px;border-radius:12px;background:#252936;border:1px solid #404456;font-weight:800}.guess-visual{background:#101219;border:1px solid #393d4d;border-radius:15px;padding:15px;text-align:center;margin-top:12px}.speech{display:inline-block;background:#2b2f3d;padding:11px 16px;border-radius:14px;font-weight:700}.guess-box{display:inline-block;background:#1d202b;border:1px solid #494d60;border-radius:13px;padding:12px 28px}.guess-box b{font-size:22px}.result{margin-top:12px;font-weight:900}.two-col-example{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:13px}.two-col-example>div{background:#101219;border:1px solid #393d4d;border-radius:13px;padding:14px}.mini-label{display:block;color:#9fa4b5;font-size:12px;margin-bottom:5px}.win-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:13px}.win-grid>div{background:#101219;border:1px solid #393d4d;border-radius:13px;padding:14px}.win-grid strong{font-size:16px}.win-grid p{font-size:13px}.rule-section ol{margin:10px 0 0;padding-left:22px;color:#d7d8df}.rule-section li{padding:5px 0}.modal-foot{padding:14px 24px;border-top:1px solid #303342;background:#161820}.modal-foot button{width:100%}
@media(max-width:720px){header{align-items:center}.logo{font-size:25px}.modal{padding:8px}.modal-card{max-height:96vh;border-radius:17px}.modal-head{padding:17px}.rules-scroll{padding:17px}.example-keys{grid-template-columns:repeat(2,1fr)}.two-col-example,.win-grid{grid-template-columns:1fr}.modal-head h2{font-size:21px}}
body.modal-open{overflow:hidden}