body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}:root{--bg-top:#fff7ec;--bg-bottom:#ffe8d1;--card-bg:#fff;--ink:#3d3329;--ink-soft:#8c7b6a;--primary:#ff8c42;--primary-dark:#f2762a;--accent:#2ec4b6;--accent-dark:#21a99c;--danger:#e85d5d;--success:#3aa66a;--line:#f0e2d2;--chip-bg:#fff1e2}.dengon-game-wrapper{background:linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);min-height:100vh;color:var(--ink);box-sizing:border-box;justify-content:center;align-items:flex-start;padding:2rem 1rem;font-family:Hiragino Maru Gothic ProN,Hiragino Sans,BIZ UDGothic,Yu Gothic,Meiryo,system-ui,sans-serif;display:flex}.card{background:var(--card-bg);text-align:center;border:1px solid #fff9;border-radius:24px;width:100%;max-width:520px;padding:2rem 2rem 2.5rem;position:relative;box-shadow:0 14px 40px #7848141f}.header{text-align:left;margin-bottom:.25rem}.btn-home{border:1.5px solid var(--line);color:var(--ink-soft);cursor:pointer;background:0 0;border-radius:999px;padding:.4rem .9rem;font-family:inherit;font-size:.85rem;font-weight:700;transition:all .2s}.btn-home:hover{background:var(--chip-bg);color:var(--ink);border-color:var(--primary)}.title{color:var(--ink);letter-spacing:.08em;margin:.5rem 0 1.5rem;font-size:1.9rem;font-weight:800}.title-accent{color:var(--primary)}.subtitle{color:var(--ink-soft);margin:-1rem 0 1.5rem;font-size:.9rem}.mode-toggle{background:var(--chip-bg);border-radius:999px;margin-bottom:1.5rem;padding:.3rem;display:flex}.mode-toggle button{color:var(--ink-soft);cursor:pointer;background:0 0;border:none;border-radius:999px;flex:1;padding:.65rem .5rem;font-family:inherit;font-size:.92rem;font-weight:700;transition:all .2s}.mode-toggle button.active{background:var(--primary);color:#fff;box-shadow:0 3px 8px #f2762a59}.mode-toggle.compact{margin-bottom:0}.mode-toggle.compact button{padding:.5rem .4rem;font-size:.88rem}.option-note{color:var(--ink-soft);margin-top:.45rem;font-size:.8rem;line-height:1.5}.timer-panel{margin:.75rem 0 .25rem}.countdown{color:var(--primary-dark);margin-bottom:.45rem;font-size:.95rem;font-weight:800}.countdown.done{color:var(--success)}.timer-bar{background:var(--line);border-radius:999px;height:10px;overflow:hidden}.timer-bar-fill{background:linear-gradient(90deg, var(--accent), var(--primary));border-radius:999px;height:100%;transition:width .2s linear}.play-sub-actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem;margin-top:.75rem;display:flex}.sub-action-btn{color:var(--ink-soft);border:1.5px solid var(--line);cursor:pointer;background:0 0;border-radius:999px;padding:.5rem 1rem;font-family:inherit;font-size:.85rem;font-weight:700;transition:all .2s}.sub-action-btn:hover{background:var(--chip-bg);color:var(--ink);border-color:var(--primary)}.sub-action-badge{color:var(--accent-dark);border:1.5px solid var(--accent);background:#f0fbfa;border-radius:999px;padding:.5rem 1rem;font-size:.85rem;font-weight:800;animation:.3s pop-in;display:inline-block}.diff-highlight{color:var(--primary-dark);background:#ff8c4226;border-radius:4px;padding:0 2px}.diff-highlight-main{color:var(--primary-dark);text-decoration:underline;-webkit-text-decoration-color:var(--primary);text-decoration-color:var(--primary);text-underline-offset:4px;background:#ff8c4233;border-radius:6px;padding:0 4px;text-decoration-thickness:3px}.input-group{text-align:left;margin-bottom:1.25rem}.label{color:var(--ink);margin-bottom:.5rem;font-size:.95rem;font-weight:700;display:block}.input,.select{border:2px solid var(--line);width:100%;color:var(--ink);box-sizing:border-box;background:#fffdf9;border-radius:14px;padding:.85rem 1rem;font-family:inherit;font-size:1.05rem;transition:border-color .2s,box-shadow .2s}.input:focus,.select:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 4px #ff8c4226}.btn{background:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:999px;width:100%;padding:.95rem 2rem;font-family:inherit;font-size:1.1rem;font-weight:700;transition:background .2s,transform .1s;box-shadow:0 5px 14px #f2762a4d}.btn:hover{background:var(--primary-dark)}.btn:active{transform:scale(.98)}.phase-chip{background:var(--chip-bg);color:var(--primary-dark);letter-spacing:.05em;border-radius:999px;padding:.35rem 1rem;font-size:.85rem;font-weight:800;display:inline-block}.word-display{color:var(--accent-dark);letter-spacing:.15rem;white-space:normal;word-break:keep-all;overflow-wrap:normal;background:#f0fbfa;border:2px dashed #2ec4b666;border-radius:18px;margin:1.2rem 0;padding:1rem .5rem;font-size:2.4rem;font-weight:800;animation:.35s pop-in}.word-display.shake{animation:.4s shake}@keyframes pop-in{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-5px)}80%{transform:translate(5px)}}.hint-meter{justify-content:center;align-items:center;gap:.4rem;margin-bottom:.5rem;display:flex}.hint-dot{background:var(--line);border-radius:50%;width:12px;height:12px;transition:background .3s,transform .3s}.hint-dot.open{background:var(--accent);transform:scale(1.15)}.hint-meter-label{color:var(--ink-soft);margin-left:.4rem;font-size:.8rem;font-weight:700}.message{min-height:1.5rem;margin:.75rem 0;font-size:1rem;font-weight:700}.message.error{color:var(--danger)}.message.info{color:var(--accent-dark)}.history-box{text-align:left;border:1px solid var(--line);background:#fdf6ee;border-radius:16px;margin-top:1.75rem;padding:1rem 1.25rem}.history-title{color:var(--ink-soft);letter-spacing:.05em;margin-bottom:.5rem;font-size:.85rem;font-weight:700}.history-list{margin:0;padding:0;list-style:none}.history-item{border-bottom:1px dashed var(--line);color:var(--ink);justify-content:space-between;align-items:center;padding:.55rem 0;font-weight:600;animation:.3s pop-in;display:flex}.history-item:last-child{border-bottom:none}.history-item.original span:first-child{color:var(--success)}.turn-badge{background:var(--chip-bg);color:var(--primary-dark);white-space:nowrap;border-radius:999px;padding:.15rem .6rem;font-size:.75rem;font-weight:700}.turn-badge.first{color:var(--success);background:#e3f7ed}.result-title{margin:.5rem 0 1rem;font-size:1.8rem;font-weight:800}.result-title.success{color:var(--success)}.result-title.fail{color:var(--ink-soft)}.answer-display{color:var(--primary-dark);background:var(--chip-bg);letter-spacing:.1em;border-radius:18px;margin:0 0 .5rem;padding:1rem;font-size:2rem;font-weight:800}.answer-romaji{color:var(--ink-soft);letter-spacing:.1em;margin-bottom:1rem;font-weight:600}.attempts-note{color:var(--ink-soft);margin-bottom:.5rem;font-size:.9rem}.mascot-container{justify-content:center;margin-bottom:.5rem;display:flex}.mascot-image{object-fit:contain;width:130px;height:130px;animation:2.4s ease-in-out infinite bob}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.rules-toggle{color:var(--accent-dark);cursor:pointer;background:0 0;border:none;padding:.25rem 0;font-family:inherit;font-size:.9rem;font-weight:700}.rules-toggle:hover{text-underline-offset:3px;text-decoration:underline}.rules-box{border-left:4px solid var(--accent);text-align:left;color:var(--ink);background:#f0fbfa;border-radius:0 12px 12px 0;margin-bottom:1.5rem;padding:1rem 1.25rem;font-size:.88rem;line-height:1.7}.rules-box h3{color:var(--accent-dark);margin:0 0 .5rem;font-size:1rem}.rules-box ol,.rules-box ul{margin:.25rem 0;padding-left:1.25rem}.rules-box li{margin:.2rem 0}@media (width<=480px){.dengon-game-wrapper{padding:1rem .75rem}.card{border-radius:20px;padding:1.5rem 1.25rem 2rem}.title{font-size:1.6rem}.word-display{letter-spacing:.1rem;font-size:1.8rem}.mascot-image{width:100px;height:100px}}