.handshake-modal{max-width:550px}.handshake-step{display:flex;flex-direction:column;gap:1rem}.handshake-code-container{display:flex;gap:.5rem;align-items:flex-start}.handshake-code-container--vertical{flex-direction:column}.handshake-code-container--vertical .handshake-code{width:100%}.handshake-code-container--vertical .btn{align-self:flex-end}.handshake-code{flex:1;padding:.75rem;font-family:SF Mono,Monaco,Cascadia Code,monospace;font-size:var(--font-size-small);line-height:1.4;background-color:var(--surface);border:1px solid oklch(0 0 0 / .08);border-radius:var(--radius-md);color:var(--ink);resize:none;overflow:hidden;word-break:break-all}.handshake-code--input{background-color:var(--bg);border-color:var(--primary)}.handshake-answer-input{display:flex;flex-direction:column;gap:.5rem}.handshake-answer-section{margin-top:.5rem;padding-top:1rem;border-top:1px solid oklch(0 0 0 / .06)}.handshake-error{padding:.75rem 1rem;background-color:#a836341a;color:var(--error);border-radius:var(--radius-md);font-size:var(--font-size-label)}.handshake-spinner{width:2rem;height:2rem;margin:1rem auto;border:2px solid var(--surface);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.handshake-spinner{animation:none;border-top-color:var(--primary);border-right-color:var(--primary)}}.landing{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center}.landing__logo{margin-bottom:1rem}.landing__title{font-size:2.5rem;font-weight:600;color:var(--primary);margin-bottom:.5rem;letter-spacing:-.02em}.landing__tagline{color:var(--muted);max-width:400px;margin-bottom:3rem}.landing__actions{display:flex;flex-direction:column;gap:1rem;width:100%;max-width:300px}.landing__rules{margin-top:4rem;max-width:500px;text-align:left;padding:1.5rem;background-color:var(--surface);border-radius:var(--radius-lg)}.landing__rules h2{font-size:var(--font-size-title);font-weight:600;margin-bottom:1rem}.landing__rules ol{padding-left:1.5rem;display:flex;flex-direction:column;gap:.75rem;color:var(--muted)}.landing__rules li{line-height:1.6}.landing__rules li strong{color:var(--ink)}.chain-editor{display:flex;flex-direction:column;gap:1rem}.chain-editor__input-row{display:flex;gap:.5rem}.chain-editor__input{flex:1;text-transform:lowercase}.chain-editor__input::placeholder{text-transform:none}.chain-editor__add{flex-shrink:0}.chain-editor__list{display:flex;flex-wrap:wrap;gap:.5rem}.chain-editor__word{display:inline-flex;align-items:center;gap:.25rem;padding:.5rem .75rem;background-color:var(--primary);color:#fff;border-radius:var(--radius-sm);font-weight:500}.chain-editor__word-text{font-size:var(--font-size-label)}.chain-editor__remove{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;background:none;border:none;color:#fff;opacity:.7;font-size:1.25rem;line-height:1;cursor:pointer;transition:opacity var(--transition-fast)}.chain-editor__remove:hover{opacity:1}.chain-editor__hint{text-align:center;padding:1rem}.chain-editor__word-count{text-align:center;font-size:var(--font-size-small);color:var(--muted)}.game-tile{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;font-size:var(--font-size-tile);font-weight:700;border-radius:var(--radius-sm);background-color:var(--surface);color:var(--ink);transition:transform var(--transition-fast),background-color var(--transition-fast)}.game-tile--current{box-shadow:0 0 0 2px var(--primary)}.game-tile--correct{background-color:var(--primary);color:#fff}.game-tile--wrong-position{background-color:var(--wrong-position);color:#fff}.word-display{display:flex;gap:.25rem;flex-wrap:wrap;justify-content:center}.game-board{display:flex;flex-direction:column;gap:1rem;padding:1.5rem;background-color:var(--surface);border-radius:var(--radius-lg)}.game-board__title{text-transform:uppercase;letter-spacing:.05em}.game-board__words{display:flex;flex-direction:column;gap:1rem}.game-board__word-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:1rem;border-bottom:1px solid oklch(0 0 0 / .06)}.game-board__word-row:last-child{border-bottom:none;padding-bottom:0}.game-board__word-info{display:flex;align-items:center;gap:.75rem}.game-board__index{width:1.5rem;text-align:center;opacity:.6}.game-board__length{flex-shrink:0}.game-board__full-word{padding:.25rem .5rem;background-color:var(--primary);color:#fff;border-radius:var(--radius-sm);text-transform:lowercase}.guess-input{display:flex;gap:.5rem;max-width:400px;margin:0 auto}.guess-input__field{flex:1;text-transform:lowercase;font-size:var(--font-size-title);text-align:center;letter-spacing:.05em}.guess-input__submit{flex-shrink:0;min-width:100px}.game-page{min-height:100vh;display:flex;flex-direction:column}.game-page__header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;border-bottom:1px solid oklch(0 0 0 / .06)}.game-page__title{font-size:var(--font-size-title);font-weight:600;color:var(--primary)}.game-page__status{display:flex;align-items:center;gap:.5rem;font-size:var(--font-size-label);color:var(--muted)}.game-page__status-dot{width:8px;height:8px;border-radius:50%;background-color:var(--muted)}.game-page__status-dot--connected{background-color:var(--correct)}.game-page__content{flex:1;display:flex;flex-direction:column;padding:1.5rem;max-width:800px;margin:0 auto;width:100%}.game-page__phase{text-align:center;margin-bottom:2rem}.game-page__phase-title{font-size:var(--font-size-headline);font-weight:600;margin-bottom:.5rem}.game-page__phase-desc{color:var(--muted)}.game-page__boards{display:grid;gap:1.5rem;margin-bottom:2rem}@media(min-width:640px){.game-page__boards{grid-template-columns:repeat(2,1fr)}}.game-page__my-board{order:1}.game-page__opponent-board{order:2}.game-page__input-section{margin-top:auto;padding-top:1.5rem;border-top:1px solid oklch(0 0 0 / .06)}.game-page__turn-indicator{text-align:center;margin-bottom:1rem}.game-page__turn-indicator--your-turn{color:var(--primary);font-weight:600}.game-page__turn-indicator--their-turn{color:var(--muted)}.game-page__waiting{text-align:center;padding:2rem;background-color:var(--surface);border-radius:var(--radius-lg)}.game-page__ready-section{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:2rem}.game-page__ready-actions{display:flex;gap:1rem}.game-page__settings{display:flex;flex-direction:column;gap:1.5rem;max-width:400px;margin:0 auto;padding:1.5rem;background-color:var(--surface);border-radius:var(--radius-lg);border:1px solid oklch(0 0 0 / .06)}.game-page__setting{display:flex;flex-direction:column;gap:.5rem}.game-page__setting-value{font-size:2rem;font-weight:700;color:var(--primary);text-align:center}.game-page__slider{width:100%;height:6px;border-radius:3px;background:#00000014;outline:none;-webkit-appearance:none}.game-page__slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--primary);cursor:pointer;box-shadow:0 2px 4px #00000026}.game-page__slider-labels{display:flex;justify-content:space-between;font-size:var(--font-size-small);color:var(--muted)}.game-page__ready-status{display:flex;gap:1rem;justify-content:center}.game-page__status-badge{padding:.5rem 1rem;border-radius:var(--radius-md);font-size:var(--font-size-small);font-weight:500}.game-page__status-badge--ready{background-color:#30bd4426;color:#16a34a}.game-page__status-badge--opponent{background-color:#0000000d;color:var(--muted)}.game-page__result{text-align:center;padding:3rem 2rem;background-color:var(--surface);border-radius:var(--radius-lg)}.game-page__result-title{font-size:2rem;font-weight:600;margin-bottom:.5rem}.game-page__result-title--win{color:var(--correct)}.game-page__result-title--lose{color:var(--muted)}.game-page__result-desc{color:var(--muted);margin-bottom:2rem}.game-page__result-chain{text-align:left;max-width:400px;margin:0 auto 2rem}.game-page__result-chain h4{font-size:var(--font-size-label);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:.5rem}.game-page__result-chain p{font-size:var(--font-size-title);text-transform:lowercase;line-height:1.8}:root{--bg: oklch(1 0 0);--surface: oklch(.97 .004 35);--ink: oklch(.06 .006 35);--primary: oklch(.52 .13 35);--primary-dark: oklch(.45 .115 35);--accent: oklch(.42 .08 200);--muted: oklch(.3 .006 35);--correct: oklch(.52 .13 35);--wrong-position: oklch(.62 .1 80);--error: oklch(.5 .15 25);--font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;--font-size-headline: 1.75rem;--font-size-title: 1.25rem;--font-size-body: 1rem;--font-size-label: .875rem;--font-size-tile: 1.5rem;--font-size-small: .75rem;--shadow-subtle: 0 1px 2px oklch(0 0 0 / .04);--shadow-hover: 0 2px 8px oklch(0 0 0 / .08);--shadow-modal: 0 8px 32px oklch(0 0 0 / .12);--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--transition-fast: .15s ease;--transition-normal: .25s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-family);font-size:var(--font-size-body);color:var(--ink);background-color:var(--bg);line-height:1.6;min-height:100vh}#root{min-height:100vh;display:flex;flex-direction:column}::selection{background-color:var(--primary);color:#fff}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}button{font-family:inherit;cursor:pointer}input{font-family:inherit}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.5rem;font-size:var(--font-size-label);font-weight:500;border:none;border-radius:var(--radius-md);transition:box-shadow var(--transition-fast),transform var(--transition-fast)}.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn-primary{background-color:var(--primary);color:#fff}.btn-primary:hover:not(:disabled){box-shadow:var(--shadow-hover);transform:translateY(-1px)}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-secondary{background-color:var(--surface);color:var(--ink);border:1px solid oklch(0 0 0 / .08)}.btn-secondary:hover:not(:disabled){box-shadow:var(--shadow-hover)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-large{padding:1rem 2rem;font-size:var(--font-size-body)}.input{width:100%;padding:.875rem 1rem;font-size:var(--font-size-body);color:var(--ink);background-color:var(--surface);border:1px solid oklch(0 0 0 / .08);border-radius:var(--radius-md);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #a6483126}.input::placeholder{color:var(--muted)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#0006;display:flex;align-items:center;justify-content:center;padding:1rem;z-index:100}.modal{background-color:var(--bg);border-radius:var(--radius-lg);box-shadow:var(--shadow-modal);max-width:500px;width:100%;max-height:90vh;overflow-y:auto}.modal-header{padding:1.5rem;border-bottom:1px solid oklch(0 0 0 / .06)}.modal-title{font-size:var(--font-size-title);font-weight:600;color:var(--ink)}.modal-body{padding:1.5rem}.modal-footer{padding:1.5rem;border-top:1px solid oklch(0 0 0 / .06);display:flex;justify-content:flex-end;gap:.75rem}.text-headline{font-size:var(--font-size-headline);font-weight:600;line-height:1.3}.text-title{font-size:var(--font-size-title);font-weight:500;line-height:1.4}.text-body{font-size:var(--font-size-body);line-height:1.6}.text-label{font-size:var(--font-size-label);font-weight:500}.text-small{font-size:var(--font-size-small);line-height:1.5}.text-muted{color:var(--muted)}.text-center{text-align:center}.text-correct{color:var(--correct)}.text-wrong-position{color:var(--wrong-position)}.text-error{color:var(--error)}