:root{--color-bg: #1c1f26;--color-surface: #262a33;--color-surface-hover: #2e333e;--color-border: #383d48;--color-text: #e8eaed;--color-text-muted: #9aa0ac;--color-danger: #e85d5d;--color-success: #3ddc97;--color-accent-gomoku: #ef4444;--color-accent-gogo-shogi: #e8a33d;--color-accent-tictactoe: #4d96ff;--color-accent-otrio: #c77dff;--color-accent-yonmoku: #38bdf8;--color-accent-gobblet: #f472b6;--color-accent-stonepush: #a3e635;--color-accent-online: #2dd4bf;--color-accent: var(--color-accent-gomoku);--radius: 8px;--font-family: "Hiragino Sans", "Yu Gothic", "Segoe UI", system-ui, sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-family);min-height:100vh}a{color:inherit}.container{max-width:960px;margin:0 auto;padding:0 24px 48px}.site-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--color-border);margin-bottom:32px}.site-header__brand{font-size:18px;font-weight:700;text-decoration:none}.site-header__back{font-size:14px;color:var(--color-text-muted);text-decoration:none}.site-header__back:hover{color:var(--color-text)}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius)}.btn{font-family:inherit;font-size:15px;font-weight:600;padding:10px 20px;border-radius:var(--radius);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);cursor:pointer;transition:background-color .15s ease,border-color .15s ease}.btn:hover{background:var(--color-surface-hover)}.btn-primary{background:var(--color-accent);border-color:var(--color-accent);color:#14161a}.btn-primary:hover{filter:brightness(1.08)}.difficulty-selector{padding:32px;text-align:center}.difficulty-selector__title{font-size:18px;margin:0 0 20px}.difficulty-selector__buttons{display:flex;gap:12px;justify-content:center}.difficulty-selector__button{min-width:96px}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:100}.modal{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:32px;min-width:280px;text-align:center}.modal__title{font-size:22px;font-weight:700;margin:0 0 8px}.modal__message{color:var(--color-text-muted);margin:0 0 24px}.modal__actions{display:flex;gap:12px;justify-content:center}.rules-modal{position:relative;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:32px;max-width:560px;max-height:80vh;overflow-y:auto;text-align:left}.rules-modal__close{position:absolute;top:12px;right:12px;width:32px;height:32px;padding:0;border-radius:50%;border:1px solid var(--color-border);background:var(--color-bg);color:var(--color-text-muted);font-size:18px;line-height:1;cursor:pointer}.rules-modal__close:hover{background:var(--color-surface-hover);color:var(--color-text)}.result-banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding:14px 20px;margin:16px 0 0;border-radius:var(--radius);border:1px solid var(--color-border);background:var(--color-surface)}.result-banner--win{border-color:var(--color-success);background:color-mix(in srgb,var(--color-success) 14%,var(--color-surface))}.result-banner--lose{border-color:var(--color-danger);background:color-mix(in srgb,var(--color-danger) 14%,var(--color-surface))}.result-banner__text{display:flex;flex-direction:column;gap:2px}.result-banner__title{font-size:16px;font-weight:700;margin:0}.result-banner__message{font-size:13px;color:var(--color-text-muted);margin:0}.result-banner__actions{display:flex;gap:8px;flex-wrap:wrap;flex-shrink:0}.online-panel{max-width:480px;margin:0 auto 16px;padding:20px 24px}.online-panel__label{display:block;font-size:13px;color:var(--color-text-muted)}.online-panel__title{font-size:15px;margin:0 0 12px}.online-panel__input{display:block;width:100%;margin-top:6px;padding:8px 10px;border-radius:var(--radius);border:1px solid var(--color-border);background:var(--color-bg);color:var(--color-text);font-family:inherit;font-size:14px}.online-panel__input--code{width:auto;flex:1;margin-top:0;text-transform:uppercase}.online-panel__buttons{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.online-panel__group{margin-top:14px}.online-panel__group:first-of-type{margin-top:0}.online-panel__group-label{font-size:12px;color:var(--color-text-muted);margin:0 0 6px}.online-panel__create-button{margin-top:16px;width:100%}.online-panel__hint{font-size:12px;color:var(--color-text-muted);margin:10px 0 0}.online-panel__error{font-size:13px;color:var(--color-danger);margin:8px 0 0;min-height:16px}.online-room-list{display:flex;flex-direction:column;gap:8px;color:var(--color-text-muted);font-size:14px}.online-room-list__item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--color-border);border-radius:var(--radius);color:var(--color-text)}.online-room-info{text-align:center;font-size:13px;color:var(--color-text-muted);margin:0 0 4px}.rules-screen{max-width:640px;margin:0 auto;padding:28px 32px}.rules-screen__title{font-size:20px;margin:0 0 20px}.rules-screen__section-title{font-size:15px;margin:20px 0 8px;color:var(--color-accent)}.rules-screen__paragraph{font-size:14px;line-height:1.7;color:var(--color-text);margin:0 0 4px}.rules-illustration{display:flex;justify-content:center;margin:10px 0 4px;padding:12px;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius);color:var(--color-accent)}.rules-illustration svg{width:100%;max-width:320px;height:auto}.rules-screen__back{margin-top:24px}.reaction-control{position:relative;display:inline-block}.reaction-palette{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);display:flex;gap:4px;padding:6px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:0 4px 12px #00000059;z-index:10}.reaction-palette__item{width:36px;height:36px;padding:0;border:none;border-radius:6px;background:transparent;font-size:20px;line-height:1;cursor:pointer}.reaction-palette__item:hover{background:var(--color-surface-hover)}.reaction-zone{display:flex;justify-content:center;align-items:center;min-height:52px;pointer-events:none}.reaction-zone--opponent{margin:4px 0 8px}.reaction-zone--own{margin:8px 0 4px}.reaction-bubble{font-size:40px;line-height:1;animation:reaction-pop .2s ease-out,reaction-fade .4s ease-in 2.6s forwards}@keyframes reaction-pop{0%{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}@keyframes reaction-fade{to{opacity:0;transform:translateY(-8px)}}