:root{--color-neutral-50:#fafafa;--color-neutral-100:#f5f5f5;--color-neutral-200:#e5e5e5;--color-neutral-300:#d4d4d4;--color-neutral-400:#a3a3a3;--color-neutral-500:#737373;--color-neutral-600:#525252;--color-neutral-700:#404040;--color-neutral-800:#333333;--color-neutral-850:#282828;--color-neutral-900:#262626;--color-neutral-950:#171717;--color-accent:#facc15;--color-accent-light:#fde047;--color-accent-dark:#eab308;--color-accent-darker:#ca8a04;--color-board:#228b22;--color-board-light:#2da32d;--color-board-dark:#1a6b1a;--color-board-darker:#145214;--color-success:#22c55e;--color-success-dark:#16a34a;--color-success-darker:#15803d;--color-error:#ef4444;--color-info:#3b82f6;--ui-overlay-bg:rgba(0, 0, 0, .6);--ui-overlay-blur:4px;--ui-panel-bg:var(--color-neutral-900);--ui-panel-bg-solid:var(--color-neutral-900);--ui-panel-border:var(--color-neutral-700);--ui-panel-shadow:0 4px 16px rgba(0, 0, 0, .3);--ui-panel-radius:16px;--ui-section-bg:var(--color-neutral-850);--ui-section-border:var(--color-neutral-700);--ui-section-radius:12px;--ui-section-highlight-bg:rgba(34, 139, 34, .1);--ui-section-highlight-border:rgba(34, 139, 34, .3);--ui-text-primary:var(--color-neutral-50);--ui-text-secondary:var(--color-neutral-400);--ui-text-muted:var(--color-neutral-500);--ui-text-accent:var(--color-board-light);--ui-text-error:var(--color-error);--ui-text-success:var(--color-success);--btn-bg:var(--color-neutral-800);--btn-bg-hover:var(--color-neutral-700);--btn-bg-active:var(--color-neutral-600);--btn-border:var(--color-neutral-600);--btn-border-hover:var(--color-neutral-500);--btn-text:var(--color-neutral-100);--btn-shadow:0 1px 2px rgba(0, 0, 0, .2);--btn-shadow-hover:0 2px 4px rgba(0, 0, 0, .25);--btn-radius:.5rem;--btn-primary-bg:var(--color-board);--btn-primary-bg-hover:var(--color-board-light);--btn-primary-bg-active:var(--color-board-dark);--btn-primary-border:var(--color-board-dark);--btn-primary-text:#ffffff;--btn-primary-shadow:0 1px 2px rgba(0, 0, 0, .2);--btn-primary-shadow-hover:0 2px 6px rgba(34, 139, 34, .3);--btn-ready-bg:var(--color-board);--btn-ready-bg-hover:var(--color-board-light);--btn-ready-bg-active:var(--color-board-dark);--btn-ready-text:#ffffff;--btn-secondary-bg:transparent;--btn-secondary-bg-hover:var(--color-neutral-800);--btn-secondary-border:var(--color-neutral-600);--btn-secondary-border-hover:var(--color-neutral-500);--btn-secondary-text:var(--color-neutral-400);--btn-secondary-text-hover:var(--color-neutral-100);--btn-disabled-bg:var(--color-neutral-800);--btn-disabled-text:var(--color-neutral-600);--btn-disabled-border:var(--color-neutral-700);--focus-ring-color:var(--color-board);--focus-ring-shadow:0 0 0 2px rgba(34, 139, 34, .4);--input-bg:var(--color-neutral-800);--input-bg-solid:var(--color-neutral-800);--input-border:var(--color-neutral-600);--input-border-focus:var(--color-board);--input-text:var(--color-neutral-50);--input-placeholder:var(--color-neutral-500);--input-shadow:0 1px 2px rgba(0, 0, 0, .15);--input-shadow-focus:0 0 0 3px rgba(34, 139, 34, .2);--input-radius:8px;--input-height:44px;--input-height-lg:48px;--name-display-bg:var(--color-neutral-850);--name-display-border:var(--color-neutral-700);--name-display-radius:12px;--icon-btn-edit-bg:transparent;--icon-btn-edit-bg-hover:var(--color-neutral-800);--icon-btn-edit-color:var(--color-neutral-500);--icon-btn-edit-color-hover:var(--color-neutral-100);--icon-btn-shuffle-bg:rgba(34, 139, 34, .12);--icon-btn-shuffle-bg-hover:rgba(34, 139, 34, .2);--icon-btn-shuffle-border:rgba(34, 139, 34, .25);--icon-btn-shuffle-border-hover:rgba(34, 139, 34, .4);--icon-btn-shuffle-color:var(--color-board-light);--icon-btn-confirm-bg:rgba(34, 197, 94, .12);--icon-btn-confirm-bg-hover:rgba(34, 197, 94, .2);--icon-btn-confirm-border:rgba(34, 197, 94, .25);--icon-btn-confirm-border-hover:rgba(34, 197, 94, .4);--icon-btn-confirm-color:var(--color-success);--invite-bg:rgba(34, 139, 34, .1);--invite-border:rgba(34, 139, 34, .2);--invite-title-color:var(--color-board-light);--invite-radius:12px;--settings-section-bg:rgba(34, 139, 34, .1);--settings-section-border:rgba(34, 139, 34, .2);--settings-section-radius:12px;--error-bg:rgba(239, 68, 68, .12);--error-text:var(--color-error);--btn-font-size:clamp(12px, 3.5cqw, 18px);--btn-font-size-sm:clamp(10px, 2.5cqw, 14px);--btn-padding-y:clamp(8px, 2cqh, 16px);--btn-padding-x:clamp(12px, 3cqw, 24px);--btn-gap:clamp(4px, 1cqh, 8px);--icon-size-sm:clamp(12px, 3cqw, 16px);--icon-size-md:clamp(16px, 4cqw, 24px);--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-2xl:20px;--radius-full:9999px;--transition-fast:.1s ease-out;--transition-base:.15s ease-out;--transition-slow:.25s ease-out;--ui-chrome-height:100px;--ui-chrome-height-online:180px;--board-min-size:200px;--board-max-size:600px;--board-max-width:clamp( var(--board-min-size), min(100%, calc(100dvh - var(--ui-chrome-height))), var(--board-max-size) );--board-max-width-online:clamp( var(--board-min-size), min(100%, calc(100dvh - var(--ui-chrome-height-online))), var(--board-max-size) );--panel-width:380px;--panel-width-compact:340px;--panel-max-height:calc(100dvh - 16px);--board-panel-gap:var(--space-6)}@media (orientation:landscape) and (max-height:400px){:root{--ui-chrome-height:40px;--board-min-size:140px}}*,:before,:after{box-sizing:border-box}html{font-size:16px}body{padding:0;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.6;color:#333;background:#fafafa;min-height:100vh}img{max-width:100%;height:auto;display:inline-block;vertical-align:middle}a{color:#2563eb;text-decoration:none;transition:color .2s ease}a:hover{color:#1043b3}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5em;font-weight:600;line-height:1.3}h1{font-size:1.75rem;color:#1a1a2e}p{margin-top:0;margin-bottom:1em}.page-header{display:flex;align-items:center;justify-content:space-between;background:#1a1a2e;color:#fff;padding:.75rem 1rem}.page-header .site-title{margin:0;font-size:1rem;font-weight:500;color:inherit}.page-header .site-title a{color:inherit}.page-header .site-title a:hover{opacity:.8}.page-header.app-bar{position:fixed;top:0;left:0;right:0;height:60px;background-color:#fff;border-bottom:1px solid #e2e8f0;box-shadow:0 2px 4px #00000014;z-index:1000;display:flex;justify-content:center}.page-header .app-bar-inner{width:100%;max-width:1280px;padding:0 16px;height:100%;display:flex;justify-content:space-between;align-items:center}.page-header .header-actions{display:flex;align-items:center}.page-content{padding:1.5rem 1rem 3rem;padding-top:calc(60px + 1.5rem)}@media (min-width:600px){.page-content{padding:2rem 1.5rem 4rem;padding-top:calc(60px + 2rem)}}.page-footer{background:#f0f0f0;border-top:1px solid #e0e0e0;padding:1rem;text-align:center;font-size:.875rem;color:#666}.page-footer a{color:#2563eb;text-decoration:underline}.page-footer a:hover{color:#1043b3}.footer-inner{max-width:1200px;margin:0 auto;text-align:center;font-size:.875rem;color:#666}.footer-links{margin-bottom:.5rem}.footer-links a{color:#666}.footer-links a:hover{color:#2563eb}.copyright{color:#888}.othello-container{min-height:70vh;min-height:70dvh}