*{box-sizing:border-box}body{color:#fff;text-align:center;background:#080f23;justify-content:center;align-items:center;min-height:100vh;margin:0;font-family:Arial,sans-serif;display:flex}main{width:100%;max-width:480px;padding:16px}h1{color:#e6bd62;font-size:28px}button{cursor:pointer;touch-action:manipulation}.start{background:#e6bd62;border:none;border-radius:8px;padding:16px 40px;font-size:20px;font-weight:700}#game,#result{display:none}#timer{color:#e6bd62;font-size:52px}#word{letter-spacing:5px;margin:5px 0 12px;font-size:40px}#typed{color:#e6bd62;min-height:32px;font-size:24px}.keyboard{width:calc(100% - 24px);max-width:450px;position:relative;left:50%;transform:translate(-50%)}.keyrow{justify-content:center;gap:3px;margin-bottom:6px;display:flex}.key{color:#fff;background:#263650;border:1px solid #65718a;border-radius:5px;flex:1;min-width:0;max-width:45px;height:48px;padding:0;font-size:16px;font-weight:700}.key:active{color:#080f23;background:#e6bd62}#result h2{margin-top:30px;margin-bottom:35px;font-size:22px}.final-score{color:#e6bd62;margin:15px 0 10px;font-size:72px;font-weight:700}.result-stats{justify-content:center;gap:50px;margin-bottom:45px;display:flex}.result-stats p{color:#aebbd0;font-size:clamp(10px,3vw,13px)}.result-stats strong{color:#fff;font-size:28px}#ranking{text-align:center;width:100%;max-width:340px;margin:24px auto 0}#ranking h2{color:#e8bf64;margin-bottom:18px;font-size:20px}#ranking-list{width:100%}.ranking-row{color:#fff;background:#111d36;border:1px solid #b99549;border-radius:8px;grid-template-columns:45px minmax(0,1fr) 80px;align-items:center;gap:8px;margin-bottom:8px;padding:12px 10px;font-size:13px;display:grid}.ranking-row span:first-child{color:#e8bf64;font-weight:700}.ranking-row span:nth-child(2){text-align:left;overflow-wrap:anywhere}.ranking-row span:last-child{text-align:right;font-weight:700}#my-rank{color:#d4af37;text-align:center;letter-spacing:1px;white-space:nowrap;background:#d4af3714;border:1px solid #d4af37;border-radius:8px;margin-top:16px;padding:12px 16px;font-size:13px;font-weight:700}#nickname{box-sizing:border-box;width:240px;max-width:90%;height:48px}.ranking-tabs{justify-content:center;gap:12px;margin:16px 0;display:flex}.ranking-tabs button{cursor:pointer;color:#c9a84c;background:0 0;border:1px solid #c9a84c;border-radius:6px;padding:10px 20px;font-weight:700}.ranking-tabs button.active{color:#101827;background:#c9a84c}#hall-of-fame-list{margin-top:24px}#hall-of-fame-list[hidden]{display:none}.award-month{color:#d9b86c;text-align:center;letter-spacing:2px;border-bottom:1px solid #8b7444;margin:28px 0 14px;padding-bottom:10px;font-size:20px}.award-row{color:#eee;background:#191919;border:1px solid #49402c;border-radius:8px;grid-template-columns:50px minmax(0,1fr) 100px;align-items:center;gap:12px;margin-bottom:8px;padding:14px 16px;font-size:15px;display:grid}.award-row span:first-child{color:#d9b86c;font-weight:700}.award-row span:nth-child(2){overflow-wrap:anywhere}.award-row span:nth-child(3){text-align:right;white-space:nowrap}.award-row:first-of-type{background:#272113;border-color:#d9b86c}@media (width<=480px){.award-row{grid-template-columns:36px minmax(0,1fr) 80px;gap:8px;padding:12px 10px;font-size:12px}.award-month{font-size:17px}}#certificate-area{text-align:center;max-width:560px;margin:24px auto}#certificate-area[hidden]{display:none}#certificate{--award-color:#c9a75e;box-sizing:border-box;color:#f5f5f5;border:5px double var(--award-color);width:100%;box-shadow:inset 0 0 0 5px #15191f, inset 0 0 0 6px var(--award-color);text-align:center;background:#15191f;padding:36px 20px}#certificate.gold{--award-color:#e8bf55}#certificate.silver{--award-color:#c6d0dc}#certificate.bronze{--award-color:#c58a61}#certificate.platinum{--award-color:#a9bbd1}.certificate-heading{color:var(--award-color);letter-spacing:3px;font-size:18px;font-weight:700}#certificate h2{color:var(--award-color);letter-spacing:1px;margin:26px 0;font-size:clamp(18px,4vw,26px)}.certificate-description{letter-spacing:1px;font-size:11px}#certificate-name{overflow-wrap:anywhere;margin:28px 0;font-size:clamp(24px,6vw,38px);font-weight:700}#certificate-month{color:var(--award-color);font-size:16px}#certificate-rank{color:var(--award-color);margin:22px 0;font-size:clamp(20px,5vw,30px);font-weight:700}#certificate-score{font-size:18px;font-weight:700}#certificate-close{cursor:pointer;margin-top:20px;padding:12px 20px}@media (width<=480px){#certificate{padding:26px 12px}}
