.cb-app{--cb-x-shape:polygon(20% 8%, 50% 38%, 80% 8%, 92% 20%, 62% 50%, 92% 80%, 80% 92%, 50% 62%, 20% 92%, 8% 80%, 38% 50%, 8% 20%);margin-top:var(--ct-space-6);padding:var(--ct-space-6);background:var(--ct-bg);border:1px solid var(--ct-border);border-radius:var(--ct-exp-radius-lg,var(--ct-radius-lg));box-shadow:var(--ct-exp-shadow-soft,var(--ct-shadow-sm))}.cb-topbar{margin-bottom:var(--ct-space-4);justify-content:flex-end;display:flex}.ct-stage--max .cb-app{flex-direction:column;display:flex}.ct-stage--max #cb-screen-play{flex-direction:column;flex:1;min-height:0;display:flex}.ct-stage--max .cb-play-layout{flex:1;grid-template-rows:minmax(0,1fr);min-height:0}.ct-stage--max .cb-board-area{flex-direction:column;height:100%;min-height:0;display:flex}.cb-app [hidden]{display:none!important}.cb-visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.cb-section-title{font-size:var(--ct-text-xl);color:var(--ct-text-main);margin:0 0 var(--ct-space-2);text-align:center;font-weight:700}.cb-welcome{align-items:center;gap:var(--ct-space-5);padding:var(--ct-space-6) 0;flex-direction:column;display:flex}.cb-logo{gap:var(--ct-space-1);grid-template-columns:repeat(2,56px);grid-auto-rows:56px;display:grid}.cb-logo__cell{border:1px solid var(--ct-border);border-radius:var(--ct-radius-sm);background:var(--ct-bg-soft);justify-content:center;align-items:center;display:flex}.cb-logo__cell:before{content:"";display:block}.cb-logo__cell--x:before{background:var(--ct-game-player-1,var(--ct-rubik-blue,#2563eb));width:30px;height:30px;clip-path:var(--cb-x-shape)}.cb-logo__cell--o:before{box-sizing:border-box;border:5px solid var(--ct-game-player-2,var(--ct-rubik-red,#ef4444));border-radius:50%;width:28px;height:28px}.cb-welcome__tagline{color:var(--ct-text-muted);font-size:var(--ct-text-sm);text-align:center;margin:0}.cb-menu{gap:var(--ct-space-3);flex-direction:column;width:100%;max-width:360px;display:flex}.cb-menu__item{align-items:center;gap:var(--ct-space-3);width:100%;padding:var(--ct-space-4) var(--ct-space-5);border:2px solid var(--ct-border);border-radius:var(--ct-exp-radius-md,var(--ct-radius-md));background:var(--ct-game-surface,var(--ct-bg-soft));box-shadow:var(--ct-exp-shadow-button,none);cursor:pointer;font-family:inherit;font-size:var(--ct-text-md);color:var(--ct-text-main);transition:border-color var(--ct-transition), background var(--ct-transition), box-shadow var(--ct-transition), transform var(--ct-exp-motion-fast,var(--ct-transition)) var(--ct-exp-ease-bounce,ease);font-weight:700;display:flex}.cb-menu__item:hover{border-color:var(--ct-accent);background:var(--ct-bg);transform:translateY(var(--ct-exp-hover-lift,-1px))}.cb-menu__item:active{transform:translateY(2px) scale(var(--ct-exp-active-scale,1));box-shadow:var(--ct-exp-shadow-button-pressed,none)}.cb-menu__item:focus-visible{outline:2px solid var(--ct-accent);outline-offset:2px}.cb-menu__icon{font-size:var(--ct-text-2xl);line-height:1}.cb-menu__label{text-align:left;flex:1}.cb-menu__arrow{color:var(--ct-text-muted)}.cb-form{gap:var(--ct-space-5);flex-direction:column;max-width:440px;margin:0 auto;display:flex}.cb-field{gap:var(--ct-space-2);border:none;flex-direction:column;margin:0;padding:0;display:flex}.cb-field--row{justify-content:space-between;align-items:center;gap:var(--ct-space-3);flex-direction:row}.cb-field__label{font-weight:600;font-size:var(--ct-text-sm);color:var(--ct-text-main)}.cb-select{width:auto;min-width:170px}.cb-choice-row{gap:var(--ct-space-2);flex-wrap:wrap;display:flex}.cb-choice{cursor:pointer;align-items:center;display:inline-flex;position:relative}.cb-choice input{opacity:0;pointer-events:none;position:absolute}.cb-choice span{padding:var(--ct-space-2) var(--ct-space-4);border:1px solid var(--ct-border);border-radius:var(--ct-radius-full);font-size:var(--ct-text-sm);color:var(--ct-text-main);background:var(--ct-bg);transition:background var(--ct-transition), border-color var(--ct-transition);display:inline-block}.cb-choice input:checked+span{background:var(--ct-accent);border-color:var(--ct-accent);color:#fff}.cb-choice input:focus-visible+span{outline:2px solid var(--ct-accent);outline-offset:2px}.cb-custom-size{align-items:center;gap:var(--ct-space-3);font-size:var(--ct-text-sm);color:var(--ct-text-muted);display:flex}.cb-size-input{width:90px}.cb-error{color:var(--ct-error);font-size:var(--ct-text-sm);margin:0}.cb-note{color:var(--ct-text-muted);font-size:var(--ct-text-sm);margin:0}.cb-custom-panel{gap:var(--ct-space-3);padding:var(--ct-space-4);background:var(--ct-game-surface,var(--ct-bg-soft));border-radius:var(--ct-exp-radius-md,var(--ct-radius-md));flex-direction:column;display:flex}.cb-custom-panel__row{justify-content:space-between;align-items:center;gap:var(--ct-space-3);font-size:var(--ct-text-sm);display:flex}.cb-form-actions{justify-content:center;gap:var(--ct-space-3);margin-top:var(--ct-space-2);display:flex}.cb-form-actions--center{justify-content:center}.cb-btn-wide{width:100%}.cb-room-stack{gap:var(--ct-space-4);flex-direction:column;max-width:440px;margin:0 auto;display:flex}.cb-room-section{gap:var(--ct-space-4);flex-direction:column;display:flex}.cb-room-section__title{font-size:var(--ct-text-md);color:var(--ct-text-main);margin:0;font-weight:700}.cb-room-box{gap:var(--ct-space-4);padding:var(--ct-space-5);border:1px solid var(--ct-border);border-radius:var(--ct-exp-radius-md,var(--ct-radius-md));background:var(--ct-game-surface,var(--ct-bg-soft));flex-direction:column;display:flex}.cb-room-box__title{font-size:var(--ct-text-md);color:var(--ct-text-main);margin:0;font-weight:700}.cb-join-wrap{align-items:center;display:flex;position:relative}.cb-join-input{width:100%;font-family:var(--ct-font-mono);letter-spacing:.03em;padding-right:48px}.cb-join-btn{border-radius:var(--ct-radius-sm);background:var(--ct-accent);color:#fff;cursor:pointer;width:34px;height:34px;transition:background var(--ct-transition), opacity var(--ct-transition);border:none;justify-content:center;align-items:center;display:flex;position:absolute;right:6px}.cb-join-btn:hover:not(:disabled){opacity:.9}.cb-join-btn:focus-visible{outline:2px solid var(--ct-accent);outline-offset:2px}.cb-join-btn:disabled{background:var(--ct-bg-soft);color:var(--ct-text-muted);cursor:not-allowed}.cb-divider{align-items:center;gap:var(--ct-space-3);color:var(--ct-text-muted);font-size:var(--ct-text-sm);margin:var(--ct-space-2) 0;display:flex}.cb-divider:before,.cb-divider:after{content:"";background:var(--ct-border);flex:1;height:1px}.cb-room-code{font-family:var(--ct-font-mono);font-size:var(--ct-text-lg);color:var(--ct-accent);background:var(--ct-bg);padding:var(--ct-space-3);border-radius:var(--ct-radius-sm);word-break:break-all;user-select:all;margin:0;font-weight:700}.cb-room-copy{gap:var(--ct-space-2);flex-wrap:wrap;display:flex}.cb-play-layout{gap:var(--ct-space-5);grid-template-columns:minmax(0,1fr) 146px;align-items:start;display:grid}.cb-board-area{min-width:0}.cb-viewport{border:1px solid var(--ct-border);border-radius:var(--ct-exp-radius-md,var(--ct-radius-md));background:var(--ct-game-surface,var(--ct-bg-soft));touch-action:none;overscroll-behavior:contain;max-height:min(74vh,680px);overflow:auto}body.ct-layout-wide .cb-viewport{height:min(74vh,680px)}.ct-stage--max .cb-viewport{flex:1;min-height:0;max-height:none}.cb-viewport--panning{cursor:grabbing}.cb-board{--cb-cell-px:28px;grid-template-columns:repeat(var(--cb-size,15), var(--cb-cell-px));width:max-content;padding:var(--ct-space-2);margin:0 auto;display:grid}.cb-board--disabled{pointer-events:none;opacity:.85}.cb-cell{width:var(--cb-cell-px);height:var(--cb-cell-px);border:1px solid var(--ct-game-grid,var(--ct-border));background:var(--ct-bg);cursor:pointer;justify-content:center;align-items:center;margin:0 -1px -1px 0;padding:0;transition:background .12s;display:flex}.cb-cell:hover{background:var(--ct-bg-soft)}.cb-cell:focus-visible{outline:2px solid var(--ct-accent);outline-offset:-2px;z-index:1;position:relative}.cb-cell--p1,.cb-cell--p2{cursor:default}.cb-cell--p1:before,.cb-cell--p2:before{content:"";animation:.16s ease-out cb-pop;display:block}.cb-cell--p1:before{width:calc(var(--cb-cell-px) * .58);height:calc(var(--cb-cell-px) * .58);background:var(--ct-game-player-1,var(--ct-rubik-blue,#2563eb));clip-path:var(--cb-x-shape)}.cb-cell--p2:before{width:calc(var(--cb-cell-px) * .56);height:calc(var(--cb-cell-px) * .56);box-sizing:border-box;border:max(2px, calc(var(--cb-cell-px) * .1)) solid var(--ct-game-player-2,var(--ct-rubik-red,#ef4444));border-radius:50%}@keyframes cb-pop{0%{opacity:.4;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.cb-cell--last{background:color-mix(in srgb, var(--ct-accent) 16%, var(--ct-bg))}.cb-cell--preview{background:color-mix(in srgb, var(--ct-accent) 24%, var(--ct-bg));outline:2px dashed var(--ct-accent);outline-offset:-2px}.cb-cell--hint{background:color-mix(in srgb, var(--ct-game-warning,var(--ct-warning,#f59e0b)) 30%, var(--ct-bg));animation:.9s ease-in-out 2 cb-pulse}.cb-cell--win{background:color-mix(in srgb, var(--ct-game-success,var(--ct-success)) 28%, var(--ct-bg))}@keyframes cb-pulse{0%,to{box-shadow:none}50%{box-shadow:0 0 0 3px color-mix(in srgb, var(--ct-warning,#f59e0b) 50%, transparent)}}.cb-panel{flex-direction:column;min-width:0;display:flex}.cb-panel__section{gap:var(--ct-space-3);padding:var(--ct-space-4) 0;flex-direction:column;display:flex}.cb-panel__section:first-child{padding-top:0}.cb-panel__section+.cb-panel__section{border-top:1px solid var(--ct-border)}.cb-players{gap:var(--ct-space-2);flex-direction:column;display:flex}.cb-player{align-items:center;gap:var(--ct-space-2);padding:var(--ct-space-2) var(--ct-space-3);border-radius:var(--ct-radius-sm);font-size:var(--ct-text-sm);color:var(--ct-text-main);border:1px solid #0000;display:flex}.cb-player--active{border-color:var(--ct-accent);background:color-mix(in srgb, var(--ct-accent) 8%, var(--ct-bg));font-weight:600}#cb-player1.cb-player--active{border-color:var(--ct-game-player-1,var(--ct-accent));background:var(--ct-game-player-1-bg,color-mix(in srgb, var(--ct-accent) 8%, var(--ct-bg)))}#cb-player2.cb-player--active{border-color:var(--ct-game-player-2,var(--ct-accent));background:var(--ct-game-player-2-bg,color-mix(in srgb, var(--ct-accent) 8%, var(--ct-bg)))}.cb-player__mark{flex-shrink:0;justify-content:center;align-items:center;width:1.2em;height:1.2em;display:inline-flex}.cb-player__mark:before{content:"";display:block}.cb-player__mark--x:before{background:var(--ct-game-player-1,var(--ct-rubik-blue,#2563eb));width:.95em;height:.95em;clip-path:var(--cb-x-shape)}.cb-player__mark--o:before{box-sizing:border-box;border:.17em solid var(--ct-game-player-2,var(--ct-rubik-red,#ef4444));border-radius:50%;width:.9em;height:.9em}.cb-clock{align-items:center;gap:var(--ct-space-2);font-size:var(--ct-text-lg);color:var(--ct-text-main);padding:var(--ct-space-2) var(--ct-space-3);border-radius:var(--ct-radius-sm);background:var(--ct-bg-soft);width:fit-content;font-weight:700;display:flex}.cb-clock__unit{font-size:var(--ct-text-xs);color:var(--ct-text-muted);font-weight:400}.cb-clock--warning{color:var(--ct-error);background:var(--ct-error-bg,#fef2f2);animation:.5s ease-in-out infinite cb-shake}@keyframes cb-shake{0%,to{transform:translate(0)}25%{transform:translate(-1px)}75%{transform:translate(1px)}}.cb-status{font-size:var(--ct-text-sm);color:var(--ct-text-main);margin:0;font-weight:600}.cb-thinking{align-items:center;gap:var(--ct-space-2);font-size:var(--ct-text-xs);color:var(--ct-text-muted);margin:0;display:flex}.cb-conn{font-size:var(--ct-text-xs);padding:var(--ct-space-1) var(--ct-space-2);border-radius:var(--ct-radius-sm);margin:0}.cb-conn--ok{color:var(--ct-success);background:var(--ct-success-bg,#f0fdf4)}.cb-conn--warn{color:var(--ct-warning,#b45309);background:var(--ct-bg-soft)}.cb-conn--error{color:var(--ct-error);background:var(--ct-error-bg,#fef2f2)}.cb-panel__toolbar{justify-content:center;align-items:center;gap:var(--ct-space-3);flex-direction:row}.cb-actions{gap:var(--ct-space-2)}.cb-actions .btn{justify-content:flex-start;width:100%}@media (width<=900px){.cb-app{padding:var(--ct-space-4)}.cb-play-layout{gap:var(--ct-space-4);grid-template-columns:1fr}.cb-viewport{max-height:62vh}.cb-panel__toolbar{justify-content:center;gap:var(--ct-space-4)}.cb-actions{grid-template-columns:repeat(2,1fr);display:grid}.cb-actions .btn{justify-content:center}}@media (prefers-reduced-motion:reduce){.cb-cell--p1:before,.cb-cell--p2:before,.cb-cell--hint,.cb-clock--warning{animation:none}.cb-menu__item:hover,.cb-menu__item:active{transform:none}}