.typing-page { background: radial-gradient(circle at 83% 7%, #7d4e9a42, transparent 25rem), #10091e; }.game { padding: 24px 0 80px; }.game-board { max-width: 890px; margin: 0 auto; overflow: hidden; border: 1px solid #ffffff2b; border-radius: 25px; background: #1b1030; box-shadow: 0 25px 80px #00000045; }.stats { display: grid; grid-template-columns: repeat(2, 1fr); padding: 17px 9%; border-bottom: 1px solid #ffffff1c; background: #ffffff08; }.stats div { display: grid; gap: 3px; text-align: center; }.stats div + div { border-left: 1px solid #ffffff1c; }.stats span, .game-notes span { color: #9bf1df; font: 750 .69rem ui-monospace, monospace; letter-spacing: .13em; }.stats strong { font: 800 1.55rem ui-monospace, monospace; }.conveyor { position: relative; height: 255px; overflow: hidden; background: linear-gradient(#211238 0 58%, #4e2c61 58% 62%, #321b48 62%); }.belt-lines { position: absolute; inset: 62% 0 0; opacity: .5; background: repeating-linear-gradient(105deg, transparent 0 46px, #a16eac75 47px 52px, transparent 53px 98px); animation: belt 1.2s linear infinite; }.plate { position: absolute; z-index: 1; top: 71px; left: 7%; width: 220px; height: 121px; display: grid; grid-template-columns: 78px 1fr; align-items: center; padding: 12px 18px 12px 11px; border: 5px solid #ffffffde; border-radius: 50%; background: #f56eaa; color: #2e1534; box-shadow: inset 0 -9px #c64982, 0 7px 0 #1c10298a; transition: transform .15s, opacity .15s; }.sushi { font-size: 2.6rem; filter: drop-shadow(0 2px 1px #0003); }.word { font-weight: 900; font-size: 2rem; letter-spacing: .08em; }.roman { display: flex; grid-column: 2; gap: 4px; color: #4d2b55; font: 800 .8rem ui-monospace, monospace; letter-spacing: .08em; }.roman i { font-style: normal; transition: color .1s, transform .1s; }.roman i.is-typed { color: #fff9e9; transform: translateY(-2px); text-shadow: 0 1px #3d203f; }.finish-line { position: absolute; z-index: 2; top: 0; right: 9%; bottom: 0; display: grid; place-items: center; width: 4px; background: #ffefc6; box-shadow: 0 0 17px #ffe8a3a3; }.finish-line span { position: absolute; top: 23px; font-size: 1.8rem; }.typing-controls { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; background: #ffffff08; }.key-guide { margin: 0; display: grid; gap: 6px; }.key-guide span { color: #9bf1df; font: 750 .66rem ui-monospace, monospace; letter-spacing: .13em; }.key-guide b { color: var(--site-muted); font-size: .88rem; font-weight: 500; }.key-guide kbd { display: inline-grid; min-width: 22px; place-items: center; margin-left: 3px; padding: 2px; border: 1px solid #ffffff3b; border-radius: 4px; color: var(--site-ink); font: 700 .75rem ui-monospace, monospace; }.typing-controls button, .score-form button, .ranking-refresh { border: 0; border-radius: 11px; background: #ad8cff; color: #170c27; font-weight: 900; letter-spacing: .08em; cursor: pointer; }.typing-controls button { min-width: 112px; min-height: 48px; }.typing-controls button:hover, .score-form button:hover, .ranking-refresh:hover { background: #c6adff; }.game-message { min-height: 23px; margin: 0; padding: 0 24px 23px; color: var(--site-muted); font-size: .88rem; text-align: center; }.game-message.is-good { color: #9bf1df; }.game-message.is-miss { color: #ffb6c8; }.game-notes, .ranking { max-width: 890px; margin-left: auto; margin-right: auto; }.game-notes { display: grid; grid-template-columns: 1fr 220px; gap: 14px; margin-top: 14px; }.game-notes > div, .ranking { border: 1px solid var(--site-line); border-radius: 17px; background: #ffffff08; }.game-notes > div { min-height: 116px; padding: 20px 23px; }.game-notes p { margin: 10px 0 0; color: var(--site-muted); font-size: .9rem; line-height: 1.65; }.game-notes b { color: #f9d2e5; }.game-notes strong { display: block; margin-top: 8px; font: 900 2rem ui-monospace, monospace; }.game-notes small { color: var(--site-muted); font-size: .75rem; }.ranking { margin-top: 14px; overflow: hidden; }.ranking-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 21px 23px; border-bottom: 1px solid var(--site-line); }.ranking-heading .eyebrow { margin: 0 0 5px; }.ranking-heading h2 { margin: 0; font-size: 1.25rem; }.ranking-refresh { padding: 9px 12px; font-size: .76rem; }.score-form { padding: 18px 23px; border-bottom: 1px solid var(--site-line); background: #ad8cff12; }.score-form label { display: block; margin-bottom: 9px; font-weight: 750; font-size: .88rem; }.score-form > div { display: flex; gap: 8px; }.score-form input { min-width: 0; flex: 1; padding: 11px 13px; border: 1px solid #ffffff3b; border-radius: 9px; outline: 0; background: #0906108a; color: var(--site-ink); }.score-form input:focus { border-color: #86f2dc; }.score-form button { padding: 0 15px; }.score-form p { min-height: 18px; margin: 7px 0 0; color: var(--site-muted); font-size: .8rem; }.ranking-list { margin: 0; padding: 0; list-style: none; }.ranking-list li { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; min-height: 51px; padding: 8px 23px; border-bottom: 1px solid #ffffff12; }.ranking-list li:last-child { border-bottom: 0; }.ranking-rank { color: #9bf1df; font: 800 .82rem ui-monospace, monospace; }.ranking-entry { display: grid; gap: 2px; min-width: 0; }.ranking-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }.ranking-time { color: var(--site-muted); font-size: .72rem; }.ranking-score { font: 800 1rem ui-monospace, monospace; }.ranking-empty { display: block !important; color: var(--site-muted); text-align: center; font-size: .88rem; } @keyframes belt { to { background-position: 98px 0; } } @media (max-width: 620px) { .game { padding-top: 16px; }.conveyor { height: 220px; }.plate { left: 5%; width: 190px; height: 108px; grid-template-columns: 66px 1fr; padding-right: 10px; }.sushi { font-size: 2.15rem; }.word { font-size: 1.68rem; }.finish-line { right: 8%; }.typing-controls { padding: 16px; }.key-guide b { font-size: .78rem; }.typing-controls button { min-width: 82px; }.game-message { padding: 0 16px 18px; }.game-notes { grid-template-columns: 1fr; }.game-notes > div { min-height: 0; }.ranking-heading, .score-form { padding-left: 16px; padding-right: 16px; }.ranking-list li { padding-left: 16px; padding-right: 16px; }.score-form > div { display: grid; grid-template-columns: 1fr; }.score-form button { min-height: 42px; } }