:root{--bg:#fafafa;--fg:#573a29;--muted:#312626;--accent:#e07f2f;--error:#e23a3a}*{box-sizing:border-box}html,body{height:100%}#root{height:100%;display:flex;flex-direction:column}body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Noto Sans JP,sans-serif;background-image:url(/ikimono-typing/assets/typing_game_BG3-CZFwDEsi.webp);background-size:cover;background-position:center center;background-attachment:fixed;background-blend-mode:overlay;background-color:#ffffff26}.app{display:flex;flex-direction:column;flex-grow:1;max-width:900px;margin:0 auto;padding:32px 20px 20px;width:100%}h1{border:1px dashed #ddd;border-radius:12px}.header{display:flex;align-items:center;justify-content:space-between}.title-logo{max-width:100%;height:auto}.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px}.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:32px}.main-content{flex-grow:1}.ad-slot{width:100%;height:90px;border:1px dashed #ddd;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--muted);margin-top:20px;flex-shrink:0}.typing-wrap{text-align:center;user-select:none;-webkit-user-select:none}.jp-word{font-size:48px;line-height:1.2;margin:0 0 12px}.typing-area-container{position:relative;min-height:100px;margin:12px;display:flex;align-items:center;justify-content:center}.roman-line{font-size:28px;letter-spacing:.5px}.ime-info{font-size:16px;color:var(--muted);margin-top:12px}.typed{color:var(--accent);transition:color .1s ease,transform .08s ease}.typed.hit{transform:scale(1.06)}.caret{position:relative;display:inline-block}.caret:after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:currentColor;opacity:.35}.mistake{height:24px;margin-top:16px;font-size:16px;color:var(--error);opacity:0;transition:opacity .2s ease}.mistake.show{opacity:1}.controls{margin-top:28px;display:flex;justify-content:center;gap:12px}button{background-color:var(--bg);color:var(--fg);border:1px solid var(--muted);border-radius:6px;padding:8px 12px;font-size:.9rem;font-weight:600;line-height:1;cursor:pointer;transition:background-color .2s ease,color .2s ease}button.primary{background:var(--accent);color:#fff}button:disabled{cursor:not-allowed;opacity:.6}.ime-input{width:80%;max-width:500px;padding:10px;font-size:24px;text-align:center;border:2px solid var(--muted);border-radius:8px;background-color:var(--bg);color:var(--fg);font-family:inherit}.ime-input:focus{outline:none;border-color:var(--accent)}.settings{display:flex;justify-content:center;align-items:center;gap:16px;padding:10px;border-radius:8px;margin:20px auto;flex-wrap:wrap}.setting-group{display:flex;align-items:center;gap:10px}.setting-button{background-color:var(--bg);border:1px solid var(--muted);color:var(--muted);cursor:pointer;padding:8px 16px;border-radius:8px;transition:all .2s ease;font-size:.9rem;font-weight:600;line-height:1}.setting-button:hover{color:var(--fg);border-color:var(--accent)}.setting-button.active{color:var(--bg);background-color:var(--accent);border-color:var(--accent)}.setting-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--bg);border:1px solid var(--muted);color:var(--fg);padding:8px 40px 8px 16px;border-radius:8px;cursor:pointer;font-size:.9rem;font-weight:600;line-height:1;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 12px center;background-size:1.1em;transition:all .2s ease}.setting-select:hover{border-color:var(--accent);background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2336b37e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e")}.setting-select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px #e2af4b4d}.setting-select:disabled{opacity:.5;cursor:not-allowed;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='0.5'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%e%3c/svg%3e")}.setting-select option{background-color:var(--bg);color:var(--fg)}.start-screen-wrap{display:flex;flex-direction:column;justify-content:center;align-items:center;width:200px;height:150px;cursor:pointer;user-select:none;-webkit-user-select:none;border-radius:12px;margin:12px auto 0;transition:background-color .2s ease}.start-screen-wrap:hover{background-color:#f0f0f0}.start-text{font-size:48px;font-weight:700;color:var(--accent)}.sub-text{margin-top:8px;font-size:20px;color:var(--muted)}.end-button-container{display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:16px}.end-button{opacity:.5;transition:opacity .2s ease;background-color:var(--fg);color:var(--bg)}.end-button:hover{opacity:1}.next-word-display{text-align:center;margin-bottom:12px;font-size:18px;color:var(--muted);opacity:.7;height:27px;line-height:1.5;user-select:none;-webkit-user-select:none}.stats-button-container{display:flex;justify-content:center;margin-top:20px;margin-bottom:-10px}.stats-button{background-color:var(--bg);color:var(--fg);border:1px solid var(--muted);border-radius:6px;padding:8px 12px;font-size:.9rem;font-weight:600;line-height:1;cursor:pointer;transition:background-color .2s ease,color .2s ease}.stats-button:hover{background-color:var(--accent);color:var(--bg)}.next-word-display span{font-weight:700;color:var(--accent);margin-right:8px}.timer-bar-container{width:50%;height:12px;background-color:#8a8a8a33;border-radius:6px;margin:12px auto 30px;overflow:hidden}.timer-bar{height:100%;background-color:var(--accent);border-radius:6px;transition:width .2s linear}.timer-bar.disabled{background-color:#8a8a8a66;transition:background-color .2s ease}.result-screen-wrap,.stats-screen-wrap{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;min-height:150px;margin:0 auto;padding:0;text-align:center}.result-screen-wrap h2{font-size:36px;color:var(--accent);margin-top:0;margin-bottom:20px}.result-settings{display:flex;justify-content:center;gap:24px;margin-bottom:20px;padding:10px 20px;background-color:#fff9;border-radius:8px;flex-wrap:wrap}.result-setting-item{display:flex;align-items:center;gap:8px}.result-setting-label{font-size:14px;color:var(--muted);font-weight:700}.result-setting-value{font-size:16px;color:var(--fg);font-weight:600}.result-details{display:grid;grid-template-columns:repeat(3,auto);gap:20px;width:100%;max-width:650px;margin-bottom:20px}.stats-details{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;width:100%;max-width:650px;margin-bottom:20px}.result-item,.stats-item{display:flex;flex-direction:column;align-items:center;gap:8px;background-color:#ffffff80;border-radius:12px;padding:20px 15px;border:2px solid rgba(255,255,255,.8);box-shadow:0 4px 15px #0000001a;transform:translateY(20px);opacity:0;animation:result-item-appear .5s cubic-bezier(.25,.46,.45,.94) forwards}.stats-item:nth-child(1){animation-delay:.2s}.stats-item:nth-child(2){animation-delay:.3s}.stats-item:nth-child(3){animation-delay:.4s}.stats-item:nth-child(4){animation-delay:.5s}@keyframes result-item-appear{to{transform:translateY(0);opacity:1}}.result-label,.stats-label{font-size:16px;font-weight:700;color:var(--muted);text-shadow:1px 1px 1px rgba(255,255,255,.5)}.result-value-container,.stats-value{line-height:1;display:flex;align-items:baseline;justify-content:center}.result-value,.stats-value span:first-child{font-size:40px;font-weight:700;color:var(--accent);text-shadow:0px 2px 0px #a06d3a,0px 4px 8px rgba(0,0,0,.3)}.result-unit,.stats-unit{font-size:16px;font-weight:400;color:var(--muted);margin-left:4px;text-shadow:none}.result-buttons,.stats-buttons{display:flex;gap:16px;margin-top:20px}.result-buttons .primary{margin-top:0}.result-label-wrap{position:relative;cursor:help;border-bottom:1px dotted var(--muted)}.result-label-wrap[data-tooltip]:hover:after{opacity:1;visibility:visible;transform:translate(-50%) translateY(0)}.result-label-wrap[data-tooltip]:after{content:attr(data-tooltip);position:absolute;bottom:130%;left:50%;transform:translate(-50%) translateY(10px);background-color:var(--fg);color:var(--bg);padding:6px 10px;border-radius:6px;font-size:14px;white-space:nowrap;z-index:10;opacity:0;visibility:hidden;transition:opacity .2s ease,transform .2s ease,visibility .2s;pointer-events:none}.result-buttons{display:flex;gap:16px}.stats-screen-wrap{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;max-width:600px;min-height:150px;margin:12px auto 0;padding:20px;text-align:center}.x-share-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:10px;background-color:#000;color:#fff;text-decoration:none;font-weight:700;box-shadow:0 1px #00000014;transition:background-color .2s ease}.x-share-button:hover{background-color:#333}.ribbon-container{position:relative;width:80%;max-width:200px;height:60px;display:flex;justify-content:center;align-items:center;margin-bottom:20px}.ribbon-svg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.ribbon-svg path{fill:var(--accent)}.ribbon-text{position:relative;z-index:2;color:#fff;font-size:28px;font-weight:700;text-shadow:1px 1px 2px rgba(0,0,0,.5)}.footer{width:100%;padding:12px 20px;margin-top:20px;text-align:center;font-size:14px;color:var(--muted);display:flex;justify-content:center;align-items:center;gap:20px;flex-shrink:0;background-color:#ffffffb3;border-radius:12px;box-shadow:0 -2px 10px #0000000d}.footer a{color:var(--muted);text-decoration:underline}.footer a.developer-account{display:flex;margin-top:2px}.footer a:hover{color:var(--accent)}