:root{font-family:Pretendard,Apple SD Gothic Neo,system-ui,sans-serif;line-height:1.5;font-weight:500;color:#1a1a1b;background-color:#fafafa}*{box-sizing:border-box}body{margin:0;min-height:100vh}#root{min-height:100vh}.app{position:relative;max-width:28rem;margin:0 auto;padding:1rem .75rem 2rem}@keyframes toast-in{0%{opacity:0;transform:translate(-50%) translateY(-8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.toast{position:fixed;top:.75rem;left:50%;z-index:500;transform:translate(-50%);max-width:calc(100% - 2rem);padding:.55rem 1rem;border-radius:999px;font-size:.82rem;font-weight:600;text-align:center;box-shadow:0 4px 20px #0000001f;pointer-events:none;animation:toast-in .2s ease-out}.toast--invalid{background:#fcc2d7;color:#851c35;border:1px solid #faa8c5}.toast--success{z-index:1100;background:#d3f9d8;color:#0b6e1d;border:1px solid #8ce99a}.tile.tile--invalid-draft{color:#c92a2a;border-color:#e03131;background:#fff5f5}.app-header{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:.35rem;margin-bottom:.25rem}.header-left{justify-self:start;display:flex;align-items:baseline;gap:.3rem;min-width:0}.header-relay{font-size:1rem;font-weight:800;font-variant-numeric:tabular-nums;color:#1a1a1b}.header-run{font-size:.78rem;font-weight:800;letter-spacing:.04em;color:#228be6;text-transform:uppercase}.app-title{margin:0;font-size:1.25rem;font-weight:700;text-align:center;line-height:1.2}.header-right{justify-self:end}.header-icon-btn{display:flex;align-items:center;justify-content:center;width:2.35rem;height:2.35rem;padding:0;border:none;border-radius:8px;background:transparent;color:#495057;cursor:pointer}.header-icon-btn:hover{background:#0000000f;color:#1a1a1b}.header-icon-rank{display:block;flex-shrink:0}.sub{text-align:center;font-size:.8rem;color:#555;margin-bottom:1rem}.sub.dev-answer{margin-top:-.35rem;margin-bottom:1rem;padding:.35rem .5rem;border-radius:6px;background:#fff3bf;color:#5c4d00;font-size:.78rem}.dev-answer-label{font-weight:700;opacity:.85}.grid{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem}.row{display:grid;grid-template-columns:repeat(6,1fr);gap:.25rem}.tile{--tile-accent: transparent;--commit-i: 0;aspect-ratio:1;display:flex;align-items:center;justify-content:center;border:2px solid #d3d6da;border-radius:4px;font-size:clamp(1rem,5vw,1.35rem);font-weight:700;text-transform:none;background:#fff;color:#1a1a1b;transform:scale(1);transform-origin:center center;transition:background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease}.tile.filled{border-color:#878a8c}.tile.correct{--tile-accent: #6aaa64}.tile.present{--tile-accent: #c9b458}.tile.absent{--tile-accent: #787c7e}.tile.scored{background:var(--tile-accent);border-color:var(--tile-accent);color:#fff;box-shadow:0 0 12px color-mix(in srgb,var(--tile-accent) 45%,transparent)}.tile.current{outline:2px solid #1a1a1b;outline-offset:-1px}@keyframes tileInputPulse{0%{transform:scale(1)}45%{transform:scale(1.08)}to{transform:scale(1)}}.tile.tile--input-pulse{animation:tileInputPulse .22s ease}@keyframes tileCommitReveal{0%{transform:scale(1);background:#fff;border-color:#878a8c;color:#1a1a1b;box-shadow:none}22%{transform:scale(1.1)}48%{transform:scale(1);background:#fff;border-color:#878a8c;color:#1a1a1b;box-shadow:none}to{transform:scale(1);background:var(--tile-accent);border-color:var(--tile-accent);color:#fff;box-shadow:0 0 12px color-mix(in srgb,var(--tile-accent) 45%,transparent)}}.tile.scored.tile--commit-reveal{animation:tileCommitReveal .52s ease calc(var(--commit-i) * 42ms) 1 normal both}.kbd{display:flex;flex-direction:column;gap:.5rem}.kbd-row{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center}.kbd button.kbd-key{min-width:2.45rem;min-height:2.65rem;padding:.55rem .5rem;font:inherit;font-size:1.05rem;font-weight:600;border:none;border-radius:6px;background:#d3d6da;color:#1a1a1b;cursor:pointer;transition:background-color .35s ease,color .35s ease,box-shadow .35s ease,transform .15s ease}.kbd button.kbd-key.correct{background:#6aaa64;color:#fff;box-shadow:0 0 10px color-mix(in srgb,#6aaa64 40%,transparent)}.kbd button.kbd-key.present{background:#c9b458;color:#fff;box-shadow:0 0 10px color-mix(in srgb,#c9b458 40%,transparent)}.kbd button.kbd-key.absent{background:#787c7e;color:#fff;box-shadow:0 0 8px color-mix(in srgb,#787c7e 35%,transparent)}.kbd button.kbd-key:disabled{opacity:1;cursor:default}.kbd button.kbd-key:not(:disabled):active{filter:brightness(.95);transform:scale(.97)}.kbd button.wide{min-width:4.75rem;min-height:2.65rem;padding:.55rem .85rem;font:inherit;font-size:.9rem;font-weight:600;border:none;border-radius:6px;background:#d3d6da;color:#1a1a1b;cursor:pointer}.kbd button.wide:disabled{opacity:.65;cursor:default}.status{text-align:center;min-height:1.5rem;font-size:.9rem;margin-top:.75rem}.status.win{color:#6aaa64;font-weight:700}.status.lose{color:#787c7e}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:1rem;background:#00000073;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal-backdrop--blocking{cursor:default}.modal-backdrop--top{z-index:1100}.modal{max-width:22rem;width:100%;padding:1rem 1.15rem;border-radius:10px;background:#fff;box-shadow:0 8px 32px #0000002e;text-align:center}.modal-header{position:relative;margin:0 0 .35rem;min-height:2rem}.modal-header h2{margin:0;padding:0 2.25rem;font-size:1.25rem;line-height:1.3}.modal-header--center h2{padding:0;text-align:center;width:100%}.modal-close-x{position:absolute;top:-.2rem;right:-.35rem;width:2.25rem;height:2.25rem;display:flex;align-items:center;justify-content:center;padding:0;border:none;border-radius:6px;background:transparent;color:#555;font:inherit;font-size:1.65rem;font-weight:400;line-height:1;cursor:pointer}.modal-close-x:hover{background:#0000000f;color:#1a1a1b}.modal-relay-line{margin:0 0 .5rem;font-size:.95rem;color:#495057}.modal-relay-line--lose{margin-bottom:.65rem}.modal--rank-register{max-width:19rem;padding:1rem 1.1rem 1.05rem}.modal-relay-line--register{margin-bottom:.75rem;font-weight:600;color:#1a1a1b}.rank-register-label{display:block;text-align:left;font-size:.78rem;font-weight:600;color:#495057;margin-bottom:.35rem}.rank-register-input{width:100%;box-sizing:border-box;margin:0 0 .85rem;padding:.5rem .6rem;font:inherit;font-size:.95rem;border:1px solid #ced4da;border-radius:6px}.rank-register-input:focus{outline:none;border-color:#228be6;box-shadow:0 0 0 2px #228be633}.modal-actions--register{margin-top:.15rem}.modal-word{margin:0 0 .65rem;font-size:1.5rem;letter-spacing:.05em}.modal-emoji-grid{margin:0 0 .85rem;font-size:clamp(1.05rem,4vw,1.3rem);line-height:1;font-variant-emoji:emoji;-webkit-user-select:all;user-select:all;display:flex;flex-direction:column;gap:.05rem}.modal-emoji-row{margin:0;padding:0;line-height:1;font-family:"Apple Color Emoji","Segoe UI Emoji",sans-serif;letter-spacing:.02em}.modal-actions{display:flex;gap:.5rem}.modal-actions--single{margin-top:.25rem}.modal-actions--single .modal-btn{flex:1}.modal--rank{text-align:left}.rank-list{list-style:none;margin:0 0 .85rem;padding:0;border:1px solid #e9ecef;border-radius:8px;overflow:hidden}.rank-empty{padding:.75rem 1rem;text-align:center;color:#868e96;font-size:.9rem}.rank-item{display:grid;grid-template-columns:1.6rem minmax(0,1fr) auto auto;gap:.35rem .5rem;align-items:center;padding:.4rem .65rem;font-size:.88rem;border-bottom:1px solid #f1f3f5}.rank-item:last-child{border-bottom:none}.rank-num{font-weight:800;color:#228be6;font-variant-numeric:tabular-nums}.rank-name{min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rank-streak{font-weight:600;white-space:nowrap}.rank-date{font-size:.78rem;color:#868e96;font-variant-numeric:tabular-nums;white-space:nowrap}.modal-btn--full{width:100%;flex:none}.modal-btn{flex:1;padding:.55rem .5rem;font:inherit;font-size:.88rem;font-weight:600;border:none;border-radius:6px;cursor:pointer}.modal-btn--copy{background:#dee2e6;color:#495057}.modal-btn--copy:hover{background:#ced4da}.modal-btn--next{background:#228be6;color:#fff}.modal-btn--next:hover:not(:disabled){background:#1c7ed6}.modal-btn--next:disabled{opacity:.55;cursor:not-allowed}