*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Arial,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}input:where([type=text]),input:where(:not([type])),input:where([type=email]),input:where([type=url]),input:where([type=password]),input:where([type=number]),input:where([type=date]),input:where([type=datetime-local]),input:where([type=month]),input:where([type=search]),input:where([type=tel]),input:where([type=time]),input:where([type=week]),select:where([multiple]),textarea,select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow: 0 0 #0000}input:where([type=text]):focus,input:where(:not([type])):focus,input:where([type=email]):focus,input:where([type=url]):focus,input:where([type=password]):focus,input:where([type=number]):focus,input:where([type=date]):focus,input:where([type=datetime-local]):focus,input:where([type=month]):focus,input:where([type=search]):focus,input:where([type=tel]):focus,input:where([type=time]):focus,input:where([type=week]):focus,select:where([multiple]):focus,textarea:focus,select:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}select:where([multiple]),select:where([size]:not([size="1"])){background-image:initial;background-position:initial;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset;print-color-adjust:unset}input:where([type=checkbox]),input:where([type=radio]){-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-shrink:0;height:1rem;width:1rem;color:#2563eb;background-color:#fff;border-color:#6b7280;border-width:1px;--tw-shadow: 0 0 #0000}input:where([type=checkbox]){border-radius:0}input:where([type=radio]){border-radius:100%}input:where([type=checkbox]):focus,input:where([type=radio]):focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 2px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}input:where([type=checkbox]):checked,input:where([type=radio]):checked{border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}input:where([type=checkbox]):checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")}@media(forced-colors:active){input:where([type=checkbox]):checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}input:where([type=radio]):checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")}@media(forced-colors:active){input:where([type=radio]):checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}input:where([type=checkbox]):checked:hover,input:where([type=checkbox]):checked:focus,input:where([type=radio]):checked:hover,input:where([type=radio]):checked:focus{border-color:transparent;background-color:currentColor}input:where([type=checkbox]):indeterminate{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}@media(forced-colors:active){input:where([type=checkbox]):indeterminate{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}input:where([type=checkbox]):indeterminate:hover,input:where([type=checkbox]):indeterminate:focus{border-color:transparent;background-color:currentColor}input:where([type=file]){background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}input:where([type=file]):focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}.container{width:100%}@media(min-width:640px){.container{max-width:640px}}@media(min-width:768px){.container{max-width:768px}}@media(min-width:1024px){.container{max-width:1024px}}@media(min-width:1280px){.container{max-width:1280px}}@media(min-width:1536px){.container{max-width:1536px}}.form-input,.form-textarea,.form-select,.form-multiselect{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow: 0 0 #0000}.form-input:focus,.form-textarea:focus,.form-select:focus,.form-multiselect:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}.form-input::-moz-placeholder,.form-textarea::-moz-placeholder{color:#6b7280;opacity:1}.form-input::placeholder,.form-textarea::placeholder{color:#6b7280;opacity:1}.form-input::-webkit-datetime-edit-fields-wrapper{padding:0}.form-input::-webkit-date-and-time-value{min-height:1.5em;text-align:inherit}.form-input::-webkit-datetime-edit{display:inline-flex}.form-input::-webkit-datetime-edit,.form-input::-webkit-datetime-edit-year-field,.form-input::-webkit-datetime-edit-month-field,.form-input::-webkit-datetime-edit-day-field,.form-input::-webkit-datetime-edit-hour-field,.form-input::-webkit-datetime-edit-minute-field,.form-input::-webkit-datetime-edit-second-field,.form-input::-webkit-datetime-edit-millisecond-field,.form-input::-webkit-datetime-edit-meridiem-field{padding-top:0;padding-bottom:0}.\!visible{visibility:visible!important}.visible{visibility:visible}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.z-50{z-index:50}.mx-4{margin-left:1rem;margin-right:1rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mt-3{margin-top:.75rem}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.table-row{display:table-row}.grid{display:grid}.list-item{display:list-item}.hidden{display:none}.h-10{height:2.5rem}.h-8{height:2rem}.h-9{height:2.25rem}.max-h-\[90vh\]{max-height:90vh}.min-h-screen{min-height:100vh}.w-9{width:2.25rem}.w-full{width:100%}.max-w-md{max-width:28rem}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.resize{resize:both}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2\.5{gap:.625rem}.overflow-auto{overflow:auto}.whitespace-nowrap{white-space:nowrap}.break-all{word-break:break-all}.rounded{border-radius:.25rem}.rounded-lg{border-radius:12px}.rounded-md{border-radius:10px}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-input{--tw-border-opacity: 1;border-color:rgb(232 245 232 / var(--tw-border-opacity, 1))}.bg-background{--tw-bg-opacity: 1;background-color:rgb(248 255 248 / var(--tw-bg-opacity, 1))}.bg-black\/50{background-color:#00000080}.bg-destructive{--tw-bg-opacity: 1;background-color:rgb(244 67 54 / var(--tw-bg-opacity, 1))}.bg-green-100{--tw-bg-opacity: 1;background-color:rgb(220 252 231 / var(--tw-bg-opacity, 1))}.bg-green-50\/50{background-color:#f0fdf480}.bg-green-500{--tw-bg-opacity: 1;background-color:rgb(34 197 94 / var(--tw-bg-opacity, 1))}.bg-orange-50{--tw-bg-opacity: 1;background-color:rgb(255 247 237 / var(--tw-bg-opacity, 1))}.bg-primary{--tw-bg-opacity: 1;background-color:rgb(76 175 80 / var(--tw-bg-opacity, 1))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.p-4{padding:1rem}.p-5{padding:1.25rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-8{padding-left:2rem;padding-right:2rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.text-center{text-align:center}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-destructive-foreground{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-gray-900{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.text-green-600{--tw-text-opacity: 1;color:rgb(22 163 74 / var(--tw-text-opacity, 1))}.text-green-700{--tw-text-opacity: 1;color:rgb(21 128 61 / var(--tw-text-opacity, 1))}.text-orange-700{--tw-text-opacity: 1;color:rgb(194 65 12 / var(--tw-text-opacity, 1))}.text-primary{--tw-text-opacity: 1;color:rgb(76 175 80 / var(--tw-text-opacity, 1))}.text-primary-foreground,.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.underline{text-decoration-line:underline}.underline-offset-4{text-underline-offset:4px}.shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.outline{outline-style:solid}.drop-shadow{--tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / .1)) drop-shadow(0 1px 1px rgb(0 0 0 / .06));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.invert{--tw-invert: invert(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}:root{--bg-hex: #FFF8E1;--bg: oklch(99.6% .0005 90);--surface-hex: #FFFFFF;--surface: oklch(100% 0 0);--fg-hex: #5D4037;--fg: oklch(26.5% .035 30);--muted-hex: #A1887F;--muted: oklch(53% .03 30);--border-hex: #14B8A6;--border: oklch(67% .12 185);--accent-hex: #0D9488;--accent: oklch(60% .13 185);--font-family-base: "YouYuan", "幼圆", "Microsoft YaHei", sans-serif;--font-family-header: "YouYuan", "幼圆", "Microsoft YaHei", sans-serif;--font-family-footer: "YouYuan", "幼圆", "Microsoft YaHei", sans-serif;--font-family-game-control: "YouYuan", "幼圆", "Microsoft YaHei", sans-serif;--font-family-room-management: "YouYuan", "幼圆", "Microsoft YaHei", sans-serif;--font-family-error: "YouYuan", "幼圆", "Microsoft YaHei", sans-serif;font-family:var(--font-family-base);line-height:1.5;font-weight:600;--z-base: 0;--z-dropdown: 100;--z-sticky: 200;--z-modal-backdrop: 300;--z-modal: 400;--z-popover: 500;--z-tooltip: 600;--z-toast: 700;--z-max: 999;color-scheme:light;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:700;color:#14b8a6;text-decoration:inherit;transition:color .3s ease}a:hover{color:#0d9488}html,body{margin:0;padding:0;width:100%;min-height:100%;max-width:100vw;overflow-x:hidden}body{display:block;min-width:320px;min-height:100vh;background-color:#f0fdfa;color:#134e4a;font-weight:700}button{border-radius:4px;border:1px solid rgba(20,184,166,.25);padding:.6em 1.2em;font-size:1em;font-weight:700;font-family:inherit;background-color:#fff;color:#0d9488;cursor:pointer;transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease}button:hover{border-color:#14b8a6;background-color:#14b8a6;color:#fff}button:focus,button:focus-visible{outline:3px solid #8B6914;outline-offset:3px}.paper-texture{background-image:url('data:image/svg+xml,%3Csvg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z" fill="%233e2723" fill-opacity="0.03" fill-rule="evenodd"/%3E%3C/svg%3E')}.wood-texture{background-image:url('data:image/svg+xml,%3Csvg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z" fill="%238D6E63" fill-opacity="0.1" fill-rule="evenodd"/%3E%3C/svg%3E')}h1,h2,h3,h4,h5,h6{font-family:var(--font-family-header);font-weight:900;color:#0d9488}.dark{--color-primary: #8D6E63;--color-secondary: #2c3e50;--color-dark: #1a1a2e;--color-light: #e9ecef;--color-accent: #4facfe;--color-text: #e9ecef;--color-text-light: #adb5bd;--color-background: #1a1a2e;--color-surface: #2c3e50;--color-border: #34495e;color-scheme:dark;background-color:var(--color-background);color:var(--color-text)}.hover\:bg-accent:hover{--tw-bg-opacity: 1;background-color:rgb(78 205 196 / var(--tw-bg-opacity, 1))}.hover\:bg-destructive\/90:hover{background-color:#f44336e6}.hover\:bg-green-700:hover{--tw-bg-opacity: 1;background-color:rgb(21 128 61 / var(--tw-bg-opacity, 1))}.hover\:bg-primary\/90:hover{background-color:#4caf50e6}.hover\:text-accent-foreground:hover{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.hover\:underline:hover{text-decoration-line:underline}.focus-visible\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible\:ring-1:focus-visible{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus-visible\:ring-ring:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(76 175 80 / var(--tw-ring-opacity, 1))}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:opacity-50:disabled{opacity:.5}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}input,textarea,[contenteditable]{-webkit-user-select:text;-moz-user-select:text;user-select:text}body{font-family:var(--font-family-base);background-color:#f8fff8;color:#2e7d32;line-height:1.6;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M10 10 Q20 5 30 10 Q35 5 40 10 Q50 5 60 10 Q65 5 70 10 Q80 5 90 10" stroke="%234caf50" stroke-width="0.5" fill="none" opacity="0.1"/></svg>');background-repeat:repeat;background-size:200px 200px}.app-container{display:flex;flex-direction:column;min-height:100vh;background-color:#f8fff8;color:#2e7d32;overflow-x:hidden;-webkit-overflow-scrolling:touch;position:relative;margin:0;padding:0;border:none;transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease}.cat-decoration{position:absolute;opacity:.1;z-index:0;pointer-events:none}.cat-decoration.top-left{top:20px;left:20px;font-size:48px;animation:float 6s ease-in-out infinite}.cat-decoration.bottom-right{bottom:20px;right:20px;font-size:36px;animation:float 8s ease-in-out infinite reverse}@keyframes float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(5deg)}}.skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.btn-feedback{transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease;position:relative;overflow:hidden}.btn-feedback:active{transform:scale(.95)}.btn-feedback:after{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#ffffff4d;transform:translate(-50%,-50%);transition:width .6s,height .6s}.btn-feedback:active:after{width:300px;height:300px}.scroll-reveal{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s ease}.scroll-reveal.visible{opacity:1;transform:translateY(0)}.page-transition{transition:opacity .3s ease,transform .3s ease}.page-transition.enter{opacity:0;transform:translateY(10px)}.page-transition.enter-active,.page-transition.exit{opacity:1;transform:translateY(0)}.page-transition.exit-active{opacity:0;transform:translateY(-10px)}.form-loading{position:relative;pointer-events:none;opacity:.7}.form-loading:after{content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border:2px solid #f3f3f3;border-top:2px solid #4caf50;border-radius:50%;animation:spin 1s linear infinite}.status-feedback{padding:10px 15px;border-radius:4px;margin:10px 0;display:flex;align-items:center;gap:10px;animation:slideIn .3s ease}.status-feedback.success{background-color:#4caf501a;color:#4caf50;border-left:4px solid #4caf50}.status-feedback.error{background-color:#f443361a;color:#f44336;border-left:4px solid #f44336}@keyframes slideIn{0%{transform:translate(-10px);opacity:0}to{transform:translate(0);opacity:1}}.network-panel{display:flex;flex-direction:column;gap:1rem;width:100vw;max-width:100vw;padding:1rem 1rem 5rem;margin:0;background-color:#f8fff8;color:#2e7d32;box-sizing:border-box;position:relative;inset:0}.logo-header{display:flex;align-items:center;justify-content:center;gap:18px;margin:.5rem 1rem .2rem;padding:.8rem 1.4rem;background:linear-gradient(135deg,#4e342e,#6d4c41);border-radius:18px;border:1px solid rgba(78,205,196,.15)}.logo-header-img{width:144px;height:144px;-o-object-fit:contain;object-fit:contain;border-radius:18px}.logo-header-text{font-family:var(--font-family-header);font-size:2rem;font-weight:600;color:#e5e7eb;letter-spacing:1px}.feature-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1rem}.feature-button{background-color:#fff;border:1px solid #f0f0f0;border-radius:16px;padding:1.5rem 1rem;text-align:center;cursor:pointer;transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease;position:relative;overflow:hidden;box-shadow:0 4px 12px #0000001a;display:flex;flex-direction:column;align-items:center}.feature-button:hover{transform:translateY(-3px);box-shadow:0 8px 20px #00000026}.create-room-btn{background:linear-gradient(135deg,#f0fff4,#e6ffed);border-color:#4ecdc44d}.ranking-btn{background:linear-gradient(135deg,#fff5f5,#ffebee);border-color:#ff6b6b4d}.match-btn{background:linear-gradient(135deg,#f3e5f5,#ede7f6);border-color:#667eea4d}.button-icon{font-size:2.2rem;display:block;margin-bottom:.8rem;color:#4ecdc4}.create-room-btn .button-icon{color:#4ecdc4}.ranking-btn .button-icon{color:#ff6b6b}.match-btn .button-icon{color:#9575cd}.button-icon-img{width:2.2rem;height:2.2rem;display:block;margin-bottom:.8rem;-o-object-fit:contain;object-fit:contain}.create-room-btn .button-icon-img{color:#4ecdc4}.ranking-btn .button-icon-img{color:#ff6b6b}.match-btn .button-icon-img{color:#9575cd}.button-text{font-size:1rem;font-weight:700;color:#333;display:block;margin-bottom:.3rem}.button-subtext{font-size:.8rem;color:#666;display:block}.bottom-nav{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-around;align-items:center;padding:.5rem 1rem;background-color:#fff;box-shadow:0 -2px 10px #0000001a;z-index:var(--z-modal)}.nav-item{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.5rem .8rem;border:none;border-radius:12px;background:none;cursor:pointer;transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease;color:#444}.nav-item:hover,.nav-item.active:hover{color:#2e7d32;background:#4caf501f;transform:translateY(-2px);box-shadow:0 4px 12px #4caf5033}.nav-item:focus,.nav-item:active,.nav-item.active:focus,.nav-item.active:active{color:#2e7d32;background:#4caf502e;transform:translateY(0);box-shadow:none}.nav-item.active{color:#4caf50;background:#4caf5014}.nav-icon{font-size:1.5rem;display:block;height:1.5rem;line-height:1.5rem;text-align:center}.nav-icon-img{width:1.5rem;height:1.5rem;-o-object-fit:contain;object-fit:contain;display:block;margin:0 auto;transition:filter .3s ease}.nav-item:hover .nav-icon-img{transform:scale(1.12);filter:drop-shadow(0 1px 3px rgba(0,0,0,.15))}.nav-icon-sprite{display:block;width:2rem;height:2rem;background-image:url(/emo/sprite-sheet.png);background-repeat:no-repeat;background-size:508px 296px;transition:transform .3s ease,filter .3s ease}.nav-item:hover .nav-icon-sprite{transform:scale(1.12);filter:drop-shadow(0 1px 3px rgba(0,0,0,.15))}.nav-icon-home{background-position:0 0}.nav-icon-game{background-position:-41px 0}.nav-icon-teaching{background-position:-82px 0}.nav-icon-profile{background-position:-123px 0}.nav-text{font-size:.8rem;font-weight:500}.nav-badge{position:absolute;top:0;right:0;background-color:#ff6b6b;color:#fff;border-radius:50%;width:16px;height:16px;font-size:.7rem;display:flex;align-items:center;justify-content:center}.room-list-section{margin:1rem;padding:1rem;background-color:#fff;border-radius:12px;box-shadow:0 2px 8px #00000014;text-align:left}.room-list-header{margin-bottom:1rem;text-align:left}.room-list-header-top{margin-bottom:.5rem}.room-list-header-top h4{margin:0;font-size:1.1rem;color:#333;white-space:nowrap}.room-list-header-bottom{display:flex;flex-direction:column;align-items:flex-start;text-align:left;justify-content:flex-start;width:100%}.room-search{display:flex;flex-direction:row;gap:.5rem;width:100%;align-items:center;justify-content:flex-start}.room-search-input{flex:1;padding:.8rem;border:1px solid #e0e0e0;border-radius:8px;font-size:1rem}.join-room-btn{padding:.8rem 1.5rem;background-color:#4caf50;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:1rem;font-weight:500}.refresh-rooms-btn{padding:.8rem 1.5rem;background-color:#4ecdc4;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:1rem;font-weight:500;margin-top:.5rem;width:-moz-fit-content;width:fit-content;align-self:flex-start;justify-content:flex-start}.room-list{margin-bottom:1rem}.room-item{display:flex;align-items:center;gap:10px;padding:10px 15px;border-radius:10px;background-color:#fff;border:1px solid #e9ecef;box-shadow:0 2px 4px #0000000d;margin-bottom:6px}.room-avatar{width:45px;height:45px;flex-shrink:0}.room-status-full{padding:8px 12px;background-color:#dc3545;color:#fff;border-radius:6px;font-size:13px;font-weight:500;flex-shrink:0;white-space:nowrap}.room-action{padding:8px 16px;background-color:#4caf50;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;flex-shrink:0;white-space:nowrap}.room-list-footer{margin-top:1rem;text-align:center}.view-more-btn{padding:10px 24px;background-color:#4caf50;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:16px;font-weight:500;transition:background-color .2s ease}.room-info-network{flex:1;min-width:0;overflow:hidden}.room-info-name-network{font-size:15px;font-weight:600;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#333}.room-info-detail-network{font-size:13px;color:#6c757d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.no-rooms-message{text-align:center;padding:30px;color:#6c757d;font-size:16px}.user-info-section{display:flex;align-items:center;gap:1.5rem;padding:2rem;background-color:#fff;border-radius:16px;border:1px solid #f0f0f0;margin:1rem;box-shadow:0 4px 12px #0000001a}.user-avatar{width:100px;height:100px;border-radius:50%;overflow:hidden;border:4px solid #4ecdc4;box-shadow:0 6px 16px #4ecdc466}.user-details{flex:1}.username{font-size:1.5rem;font-weight:700;color:#333;display:block;margin-bottom:.5rem}.user-title{font-size:1rem;color:#666;background-color:#4ecdc426;padding:.3rem .8rem;border-radius:16px;border:1px solid rgba(78,205,196,.3);display:inline-block}.local-game-interface{display:flex;flex-direction:column;height:100vh;margin:0;padding:0;border:none;background-color:#f8fff8;overflow:visible}@media(min-width:1024px){.local-game-interface{flex-direction:row}.local-game-interface>.app-main{flex:1;height:100vh;overflow:hidden}.local-game-interface>.bottom-control-panel{width:280px;height:100vh;border-left:1px solid rgba(78,205,196,.2);border-top:none;box-shadow:-4px 0 16px #0000001a;overflow:hidden}.local-game-interface>.bottom-control-panel.collapsed,.local-game-interface>.bottom-control-panel.expanded{height:100vh;max-height:100vh;overflow:hidden}.local-game-interface>.bottom-control-panel .control-panel-toggle{display:none}.local-game-interface>.bottom-control-panel .control-panel-content{display:flex!important;flex-direction:column;height:100vh;max-height:100vh;overflow:hidden;padding:.8rem}.local-game-interface>.bottom-control-panel .control-panel-content h3{font-size:1rem;margin-bottom:.6rem;padding-bottom:.5rem;flex-shrink:0}.local-game-interface>.bottom-control-panel .control-section{margin-bottom:.5rem;padding:.6rem;flex-shrink:0}.local-game-interface>.bottom-control-panel .control-section h4{font-size:.85rem;margin-bottom:.4rem}.local-game-interface>.bottom-control-panel .control-item select{padding:.4rem;font-size:.8rem}.local-game-interface>.bottom-control-panel .control-button{padding:.5rem .8rem;font-size:.8rem}.local-game-interface>.bottom-control-panel .color-info{padding:.5rem;margin-bottom:.5rem}.local-game-interface>.bottom-control-panel .color-info p{font-size:.8rem;margin:.2rem 0}.local-game-interface>.bottom-control-panel .ai-thinking{padding:.4rem;font-size:.75rem;margin-top:.4rem}.local-game-interface>.bottom-control-panel .control-buttons{gap:.4rem}.local-game-interface>.bottom-control-panel .difficulty-toggle-container{padding:0}.local-game-interface>.bottom-control-panel .difficulty-select{padding:6px 28px 6px 12px;font-size:.85rem;min-width:140px;background-position:right 10px top 50%}}.local-game-header{background-color:#1a1a2ee6;color:#fff;padding:.4rem 1rem;text-align:center;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(78,205,196,.2);width:100%;max-width:100%;margin:0;transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease;position:relative;flex-shrink:0;z-index:var(--z-modal);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 16px #0000001a;min-height:50px}.header-ai-difficulty{color:#4ecdc4;font-size:.9rem;font-weight:600;padding:.4rem .8rem;background:#4ecdc41a;border:1px solid rgba(78,205,196,.3);border-radius:16px;white-space:nowrap}.game-header-content{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0;gap:1rem;height:100%;position:relative}.game-header-content h2{font-size:1.2rem;font-weight:700;margin:0;font-family:var(--font-family-header);letter-spacing:1px;color:#fff;position:absolute;left:50%;transform:translate(-50%);white-space:nowrap}.header-button{background-color:#4ecdc41a;color:#fff;border:none;padding:.4rem .8rem;border-radius:6px;cursor:pointer;font-size:.8rem;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1),background-color .3s cubic-bezier(.4,0,.2,1),color .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1),border-color .3s cubic-bezier(.4,0,.2,1);font-family:var(--font-family-game-control);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);position:relative;overflow:hidden;height:36px;display:flex;align-items:center;justify-content:center;white-space:nowrap;text-overflow:ellipsis}.header-button:hover{background:#4ecdc426;color:#45b7aa;transform:translateY(-1px);box-shadow:0 4px 12px #4ecdc433}.header-button:active{transform:translateY(0)}.header-buttons{display:flex;align-items:center;gap:.5rem}.header-button.back-button,.header-button.create-room-button{background:#4caf5026;border:1px solid rgba(76,175,80,.4);color:#81c784;font-weight:700;font-size:.85rem;padding:.4rem 1rem;height:36px;min-width:88px;box-sizing:border-box}.header-button.back-button:hover,.header-button.create-room-button:hover{background:#4caf504d;border-color:#4caf5099;color:#a5d6a7;transform:translateY(-1px);box-shadow:0 4px 12px #4caf5040}.placement-confirm-toggle{background:#ffffff08;border:1px solid rgba(78,205,196,.3);color:#4ecdc4;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1),background-color .3s cubic-bezier(.4,0,.2,1),color .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1),border-color .3s cubic-bezier(.4,0,.2,1)}.placement-confirm-toggle.enabled{background:#4ecdc426;border-color:#4ecdc480;color:#4ecdc4}.placement-confirm-toggle.disabled{background:#ff6b6b1a;border-color:#ff6b6b4d;color:#ff6b6b}@media(max-width:768px){.game-header-content{flex-wrap:wrap;gap:.3rem;padding:.3rem 0}.game-header-content h2{position:static;width:100%;text-align:center;transform:none;font-size:1rem;order:3;padding:.1rem 0 .2rem;white-space:normal}.game-header-content .header-buttons{order:2}}.game-container{flex:1;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;margin:0;padding:0;border:none;min-height:0;overflow:visible}.app-main{flex:1;display:flex;flex-direction:column;overflow:visible;min-height:0}.本地游戏{flex:1;display:flex;justify-content:center;align-items:center;overflow:visible;min-height:0}.board-area-wrapper{flex:1;align-self:stretch;display:flex;justify-content:center;align-items:center;overflow:hidden;min-height:0;max-width:100vw;padding:.25rem 0}.board-with-controls{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:6px;max-height:100%;overflow:visible}.room-manager{flex-shrink:1;overflow-y:auto;min-height:0;max-height:35vh}.online-player-card{background:#ffffff08;border:1px solid rgba(78,205,196,.1);border-radius:10px;padding:.8rem;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:border-color .3s ease,box-shadow .3s ease}.online-player-card.current-turn{border-color:#4ecdc466;box-shadow:0 0 12px #4ecdc426}.player-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.player-card-label{font-size:.75rem;color:#ffffff80;text-transform:uppercase;letter-spacing:.5px}.turn-badge{font-size:.7rem;color:#4ecdc4;background:#4ecdc41a;padding:.15rem .4rem;border-radius:8px;font-weight:600}.player-card-body{display:flex;align-items:center;gap:.6rem}.player-avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;flex-shrink:0;background:#4ecdc426;border:2px solid rgba(78,205,196,.2)}.player-avatar img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.avatar-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;color:#4ecdc4}.player-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.2rem}.player-name-row{display:flex;align-items:center;gap:.3rem}.player-name{font-weight:600;color:#fff;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.host-badge{font-size:.65rem;color:gold;background:#ffd7001a;padding:.1rem .3rem;border-radius:4px;flex-shrink:0}.player-meta{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:#ffffffb3}.player-color{color:#4ecdc4}.player-captures{color:#fff9}.player-ready-status{font-size:.75rem;padding:.1rem .3rem;border-radius:4px;width:-moz-fit-content;width:fit-content}.player-ready-status.ready{color:#4caf50;background:#4caf501a}.player-ready-status.not-ready{color:#ffffff80;background:#ffffff0d}.connection-status-bar{display:flex;align-items:center;justify-content:center;gap:.4rem;padding:.4rem;font-size:.75rem;border-radius:6px;margin-top:auto}.connection-status-bar.connected{color:#4caf50;background:#4caf5014}.connection-status-bar.disconnected{color:#ff6b6b;background:#ff6b6b14}.connection-dot{width:8px;height:8px;border-radius:50%;background:currentColor}.top-ad-bar{background-color:#667eea26;color:#333;padding:.8rem 1.5rem;border-radius:8px;margin-bottom:1rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 2px 8px #667eea4d;border:1px solid rgba(102,126,234,.3)}.ad-info{display:flex;align-items:center;gap:.8rem;justify-content:center;flex-wrap:wrap}.ad-label{font-size:1rem;font-weight:700;color:#333}.ad-value{font-size:1rem;font-weight:700;color:#667eea;text-shadow:0 1px 3px rgba(102,126,234,.3);background-color:#fffc;padding:.2rem .6rem;border-radius:12px;border:1px solid rgba(102,126,234,.3)}.video-ad{display:flex;flex-direction:column;align-items:center;gap:.8rem;width:100%}.ad-video{width:100%;max-height:200px;border-radius:8px;-o-object-fit:cover;object-fit:cover;box-shadow:0 2px 8px #667eea4d;border:1px solid rgba(102,126,234,.3)}.video-ad-label{font-size:1rem;font-weight:700;color:#333;text-align:center;text-shadow:0 1px 3px rgba(102,126,234,.3);background-color:#fffc;padding:.2rem .6rem;border-radius:12px;border:1px solid rgba(102,126,234,.3)}.profile-container{display:flex;flex-direction:column;height:100vh;min-height:0;background-color:#f8fff8;color:#2e7d32;overflow:hidden}.profile-content{flex:1;padding:1rem 1.5rem;display:flex;flex-direction:column;gap:1rem;overflow:hidden;height:100%;min-height:0}.user-profile-header{display:flex;align-items:center;gap:1rem;padding:1rem;background-color:#fff;border-radius:16px;box-shadow:0 4px 12px #0000001a;flex-shrink:0}.user-profile-avatar{width:80px;height:80px;border-radius:50%;overflow:hidden;border:4px solid #4caf50;box-shadow:0 6px 16px #4caf5066}.avatar-image{display:block;width:100%;height:100%;-o-object-fit:contain;object-fit:contain}.user-profile-details{flex:1}.user-profile-details h3{font-size:1.3rem;font-weight:700;color:#2e7d32;margin:0 0 .3rem}.user-wechat{font-size:.9rem;color:#4a9d50;margin:0}.user-profile-arrow{font-size:1.3rem;color:#4a9d50;cursor:pointer}.user-status-section{display:flex;gap:.75rem;padding:.75rem;background-color:#fff;border-radius:16px;box-shadow:0 4px 12px #0000001a;flex-shrink:0}.status-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.75rem;background-color:#f8fff8;border-radius:12px;transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease}.status-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.status-icon{font-size:1.5rem}.status-text{font-size:.9rem;color:#2e7d32;text-align:center}.profile-features{display:flex;flex-direction:column;gap:.75rem;flex-shrink:0}.feature-section{background-color:#fff;border-radius:16px;box-shadow:0 4px 12px #0000001a;overflow:hidden}.feature-item{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-bottom:1px solid #e8f5e8;transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease;cursor:pointer}.feature-item:last-child{border-bottom:none}.feature-item:hover{background-color:#f8fff8}.feature-icon{font-size:1.2rem;margin-right:.75rem}.feature-text{flex:1;font-size:.95rem;color:#2e7d32}.feature-arrow{font-size:1rem;color:#4a9d50}.logout-section{display:flex;justify-content:center;margin-top:1rem;flex-shrink:0}.logout-btn{padding:.75rem 2.5rem;background-color:#f44336;color:#fff;border:none;border-radius:8px;font-size:.95rem;font-weight:500;cursor:pointer;transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease;box-shadow:0 4px 12px #f443364d}.logout-btn:hover{background-color:#d32f2f;transform:translateY(-2px);box-shadow:0 6px 16px #f4433666}.connection-status{padding:1rem 1.5rem;background-color:#fff;border-top:1px solid #e8f5e8;display:flex;flex-direction:column;gap:.5rem}.connection-indicator{font-size:.9rem;font-weight:500}.connection-indicator.connected{color:#4caf50}.connection-indicator.disconnected{color:#f44336}.connection-error{font-size:.8rem;color:#4a9d50}.login-section{display:flex;justify-content:center;align-items:center;flex:1;padding:1rem;width:100%;height:100%;min-height:0;overflow:hidden}.login-section .auth-page-container{height:100%!important;min-height:unset!important}.avatar-selector{position:fixed;inset:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:var(--z-modal)}.avatar-selector-content{background-color:#fff;border-radius:16px;padding:2rem;width:90%;max-width:500px;max-height:80vh;overflow-y:auto}.avatar-selector-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.avatar-selector-title{font-size:1.5rem;font-weight:700;color:#2e7d32}.avatar-selector-close{font-size:1.5rem;cursor:pointer;color:#4a9d50}.avatar-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}.avatar-option{aspect-ratio:1;border-radius:8px;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease;border:2px solid transparent}.avatar-option:hover{transform:scale(1.05);border-color:#4caf50}.avatar-option.selected{border-color:#4caf50;background-color:#4caf501a}.avatar-option img{width:80%;height:80%;-o-object-fit:contain;object-fit:contain}.tutorial-container{min-height:100vh;background-color:#f8fff8;color:#2e7d32;padding:1rem;position:relative;width:100%;box-sizing:border-box}.tutorial-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 0;margin-bottom:1.5rem;border-bottom:1px solid #e8f5e8}.back-btn{display:flex;align-items:center;gap:.5rem;background:none;border:none;color:#2e7d32;font-size:1rem;cursor:pointer;padding:.5rem 1rem;border-radius:8px;transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease}.back-btn:hover{background-color:#4caf501a}.back-icon{font-size:1.2rem;font-weight:700}.tutorial-header h2{font-size:1.5rem;font-weight:700;color:#2e7d32;margin:0}.cat-decoration{font-size:1.5rem;animation:float 6s ease-in-out infinite}.tutorial-main-content{display:flex;flex-direction:column;gap:1.5rem}.tutorial-step-card{background-color:#fff;border-radius:16px;box-shadow:0 4px 12px #0000001a;padding:1.5rem;overflow:hidden;transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease}.tutorial-step-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px #00000026}.tutorial-step-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid #e8f5e8}.tutorial-step-header h2{font-size:1.3rem;font-weight:700;color:#2e7d32;margin:0}.step-indicator{background-color:#81c784;color:#fff;padding:.3rem .8rem;border-radius:12px;font-size:.8rem;font-weight:500}.tutorial-step-content{margin-bottom:1.5rem;line-height:1.6;transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease}.tutorial-step-content.step-changing{opacity:0;transform:translateY(10px)}.tutorial-step-footer{padding-top:1.5rem;border-top:1px solid #e8f5e8}.tutorial-progress{display:flex;justify-content:center;gap:.5rem;margin-bottom:1.5rem}.progress-dot{width:8px;height:8px;border-radius:50%;background-color:#e8f5e8;transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease}.progress-dot.active{width:12px;height:12px;background-color:#4caf50;transform:scale(1.2)}.tutorial-buttons{display:flex;gap:1rem;justify-content:center}.tutorial-btn{padding:.8rem 1.5rem;border:1px solid #e8f5e8;border-radius:8px;background-color:#fff;color:#2e7d32;font-size:1rem;font-weight:500;cursor:pointer;transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease;min-width:100px}.tutorial-btn:hover:not(:disabled){background-color:#f8fff8;transform:translateY(-2px)}.tutorial-btn:disabled{opacity:.5;cursor:not-allowed}.tutorial-btn.primary{background-color:#4caf50;color:#fff;border-color:#4caf50}.tutorial-btn.primary:hover{background-color:#388e3c;border-color:#388e3c}.customer-service-card{background-color:#fff;border-radius:16px;box-shadow:0 4px 12px #0000001a;padding:1.5rem;transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease}.customer-service-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px #00000026}.customer-service-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.customer-service-header h3{font-size:1.2rem;font-weight:700;color:#2e7d32;margin:0}.customer-service-icon{font-size:1.5rem}.customer-service-card p{margin-bottom:1rem;color:#4a9d50}.wechat-contact{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;padding:1rem;background-color:#f8fff8;border-radius:8px;border:1px solid #e8f5e8}.wechat-label{font-weight:500;color:#2e7d32}.wechat-number{font-weight:700;color:#4caf50;background-color:#fff;padding:.3rem .8rem;border-radius:12px;border:1px solid #81c784}.wechat-qr{display:flex;justify-content:center;margin-top:1rem}.qr-placeholder{width:120px;height:120px;background-color:#f8fff8;border:1px solid #e8f5e8;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#4a9d50;font-size:.9rem}.friends-container{min-height:100vh;background-color:#f8fff8;color:#2e7d32;padding:1rem;position:relative}.friends-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 0;margin-bottom:1.5rem;border-bottom:1px solid #e8f5e8}.friends-header h2{font-size:1.5rem;font-weight:700;color:#2e7d32;margin:0}.friends-tabs{display:flex;background-color:#fff;border-radius:12px;padding:.3rem;margin-bottom:1.5rem;box-shadow:0 2px 8px #0000001a}.tab-btn{flex:1;padding:.8rem 1rem;border:none;background:none;border-radius:8px;font-size:1rem;font-weight:500;color:#4a9d50;cursor:pointer;transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease;position:relative}.tab-btn.active{background-color:#4caf50;color:#fff;box-shadow:0 2px 8px #4caf504d}.request-badge{position:absolute;top:-5px;right:-5px;background-color:#f44336;color:#fff;border-radius:50%;width:20px;height:20px;font-size:.7rem;display:flex;align-items:center;justify-content:center;font-weight:700}.friends-search{margin-bottom:1.5rem}.friends-search-input{width:100%;padding:1rem;border:1px solid #e8f5e8;border-radius:12px;font-size:1rem;background-color:#fff;box-shadow:0 2px 8px #0000001a;transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease}.friends-search-input:focus{outline:none;border-color:#4caf50;box-shadow:0 2px 12px #4caf504d}.friends-list{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}.friend-item{display:flex;align-items:center;gap:1rem;padding:1.2rem;background-color:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a;transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease}.friend-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.friend-avatar{position:relative;width:50px;height:50px;border-radius:50%;overflow:hidden;border:2px solid #81c784;flex-shrink:0}.friend-avatar img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.friend-status{position:absolute;bottom:0;right:0;width:12px;height:12px;border-radius:50%;border:2px solid white}.friend-status.online{background-color:#4caf50}.friend-status.in_game{background-color:#ff9800}.friend-status.offline{background-color:#9e9e9e}.friend-info{flex:1;min-width:0}.friend-name{font-size:1rem;font-weight:500;color:#2e7d32;margin-bottom:.3rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.friend-status-text{font-size:.8rem;font-weight:500}.friend-status-text.online{color:#4caf50}.friend-status-text.in_game{color:#ff9800}.friend-status-text.offline{color:#9e9e9e}.friend-actions{display:flex;gap:.5rem}.friend-action-btn{padding:.5rem 1rem;border:1px solid #e8f5e8;border-radius:8px;font-size:.8rem;font-weight:500;cursor:pointer;transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease;min-width:60px}.invite-btn{background-color:#4caf50;color:#fff;border-color:#4caf50}.invite-btn:hover{background-color:#388e3c;border-color:#388e3c}.offline-btn{background-color:#f8fff8;color:#9e9e9e;border-color:#e8f5e8;cursor:not-allowed;opacity:.6}.delete-btn{background-color:#fff;color:#f44336;border-color:#f44336}.delete-btn:hover{background-color:#f44336;color:#fff}.add-friend-section{display:flex;justify-content:center;margin-top:2rem}.add-friend-btn{padding:1rem 2rem;background-color:#4caf50;color:#fff;border:none;border-radius:12px;font-size:1rem;font-weight:500;cursor:pointer;transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease;box-shadow:0 4px 12px #4caf504d;display:flex;align-items:center;gap:.5rem}.add-friend-btn:hover{background-color:#388e3c;transform:translateY(-2px);box-shadow:0 6px 16px #4caf5066}.friend-requests-section{background-color:#fff;border-radius:16px;box-shadow:0 4px 12px #0000001a;padding:1.5rem}.friend-requests-section h4{font-size:1.2rem;font-weight:700;color:#2e7d32;margin:0 0 1.5rem}.friend-request-item{display:flex;align-items:center;gap:1rem;padding:1rem;border-bottom:1px solid #e8f5e8;transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease}.friend-request-item:last-child{border-bottom:none}.friend-request-item:hover{background-color:#f8fff8;border-radius:8px}.friend-request-info{flex:1;min-width:0}.friend-request-name{font-size:1rem;font-weight:500;color:#2e7d32;margin-bottom:.3rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.friend-request-time{font-size:.8rem;color:#4a9d50}.friend-request-actions{display:flex;gap:.5rem}.friend-request-btn{padding:.5rem 1rem;border:1px solid #e8f5e8;border-radius:8px;font-size:.8rem;font-weight:500;cursor:pointer;transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease;min-width:60px}.accept-btn{background-color:#4caf50;color:#fff;border-color:#4caf50}.accept-btn:hover{background-color:#388e3c;border-color:#388e3c}.reject-btn{background-color:#fff;color:#f44336;border-color:#f44336}.reject-btn:hover{background-color:#f44336;color:#fff}.add-friend-modal{position:fixed;inset:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:var(--z-modal);animation:fadeIn .3s ease}.add-friend-modal-content{background-color:#fff;border-radius:16px;padding:2rem;width:90%;max-width:400px;box-shadow:0 8px 24px #0003;animation:slideUp .3s ease}.add-friend-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.add-friend-modal-header h3{font-size:1.3rem;font-weight:700;color:#2e7d32;margin:0}.close-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;color:#4a9d50;transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%}.close-btn:hover{background-color:#f8fff8;color:#2e7d32}.add-friend-modal-body{margin-bottom:2rem}.add-friend-modal-body p{margin-bottom:1rem;color:#4a9d50}.friend-id-input{width:100%;padding:1rem;border:1px solid #e8f5e8;border-radius:8px;font-size:1rem;transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease}.friend-id-input:focus{outline:none;border-color:#4caf50;box-shadow:0 0 0 3px #4caf501a}.add-friend-modal-footer{display:flex;gap:1rem;justify-content:flex-end}.cancel-btn,.confirm-btn{padding:.8rem 1.5rem;border:1px solid #e8f5e8;border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease}.cancel-btn{background-color:#fff;color:#2e7d32}.cancel-btn:hover{background-color:#f8fff8}.confirm-btn{background-color:#4caf50;color:#fff;border-color:#4caf50}.confirm-btn:hover:not(:disabled){background-color:#388e3c;border-color:#388e3c}.confirm-btn:disabled{opacity:.5;cursor:not-allowed}.loading-message,.no-friends-message,.no-friend-requests,.no-rooms-message{text-align:center;padding:2rem;color:#4a9d50;background-color:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media(max-width:375px){.game-header-content h2{font-size:.8rem;max-width:80px}.header-button{padding:.25rem .4rem;font-size:.7rem}.header-button.back-button{padding:.25rem .4rem}}@media(max-width:768px){.logo-header{gap:12px;margin:.4rem .8rem .1rem;padding:.6rem 1rem;border-radius:14px}.logo-header-img{width:120px;height:120px}.logo-header-text{font-size:1.6rem}.feature-buttons{grid-template-columns:repeat(3,1fr);gap:.8rem}.feature-button{padding:1rem .8rem}.button-icon{font-size:1.8rem}.button-icon-img{width:1.8rem;height:1.8rem}.button-text{font-size:.9rem}.user-info-section{padding:1.5rem;gap:1rem}.user-avatar{width:80px;height:80px}.username{font-size:1.3rem}.local-game-header{padding:.5rem .8rem;min-height:44px}.game-header-content{gap:.4rem}.game-header-content h2{font-size:.9rem;white-space:nowrap}.header-button{padding:.3rem .5rem;font-size:.75rem;height:auto;min-height:28px;line-height:1.2;display:flex;align-items:center;justify-content:center}.header-ai-difficulty{font-size:.75rem;padding:.2rem .5rem}.placement-confirm-toggle{font-size:.7rem;padding:.2rem .4rem}.profile-content{padding:1rem;gap:1rem}.user-profile-header{padding:1rem;gap:.8rem}.user-profile-avatar{width:60px;height:60px}.user-profile-details h3{font-size:1.1rem;margin-bottom:.2rem}.user-wechat{font-size:.8rem}.user-status-section{padding:.8rem;gap:.5rem}.status-item{padding:.5rem;gap:.2rem}.feature-item{padding:.8rem}.logout-section{margin-top:1rem}.logout-btn{padding:.7rem 2rem;font-size:.85rem}.avatar-grid{grid-template-columns:repeat(4,1fr);gap:.8rem}.tutorial-container{padding:.8rem}.tutorial-step-card{padding:1.2rem}.tutorial-step-header h2{font-size:1.1rem}.tutorial-buttons{flex-direction:column}.tutorial-btn{width:100%}.customer-service-card{padding:1.2rem}.friends-container{padding:.8rem}.friend-item{padding:1rem}.friend-avatar{width:40px;height:40px}.friend-action-btn{padding:.4rem .8rem;font-size:.7rem;min-width:50px}.add-friend-modal-content{padding:1.5rem;width:95%}}.audio-controls-fixed{position:fixed;right:12px;z-index:var(--z-max);display:flex;align-items:center;cursor:grab;-moz-user-select:none;user-select:none;-webkit-user-select:none}.audio-controls-fixed.dragging{cursor:grabbing}.music-controls{display:flex;align-items:center;gap:8px;padding:8px;background:#fff;border-radius:24px;box-shadow:0 2px 8px #00000026}.audio-toggle-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:transparent;cursor:pointer;transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease}.audio-toggle-btn:hover{background:#f8fff8}.audio-toggle-btn.active{background:#4caf50}.audio-toggle-btn.active:hover{background:#388e3c}.audio-icon{font-size:18px}.model-viewer-floater{position:fixed;z-index:var(--z-max);border-radius:16px;overflow:visible;background:transparent;cursor:grab;-moz-user-select:none;user-select:none;-webkit-user-select:none;transition:transform .2s ease,box-shadow .2s ease}.model-viewer-floater:hover{transform:scale(1.05)}.model-viewer-floater.dragging-window{cursor:grabbing;transform:scale(1.02)}.model-viewer-floater canvas{display:block;width:100%!important;height:100%!important;border-radius:16px;background:#ffffffe6;box-shadow:0 4px 20px #0000001f;border:1px solid rgba(76,175,80,.15)}.model-viewer-floater:hover canvas{box-shadow:0 8px 30px #0000002e}.model-viewer-close{position:absolute;top:-6px;right:-6px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:#00000080;color:#fff;font-size:14px;line-height:1;cursor:pointer;z-index:1;opacity:0;transition:opacity .2s ease,background .2s ease}.model-viewer-floater:hover .model-viewer-close{opacity:1}.model-viewer-close:hover{background:#000000b3}.model-viewer-loading{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#fffffff2;color:#4caf50;font-size:12px;border-radius:16px;z-index:1}.model-viewer-error{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#fffffff2;color:#ff6b6b;font-size:20px;border-radius:16px;z-index:1}.network-container{width:100%;height:100%;overflow:hidden}.network-container .network-panel{position:relative!important;inset:auto}.modal-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:var(--z-max);padding:20px}.modal-content{background:#fff;border-radius:12px;padding:20px;max-width:90vw;max-height:90vh;overflow:visible}.board-image-modal{display:flex;flex-direction:column;align-items:center;gap:16px;width:auto;height:auto;max-width:95vw;max-height:95vh;overflow:visible;padding:20px}.board-image-modal h3{margin:0;font-size:1.3rem;color:#4caf50}.board-image-container{width:auto;height:auto;max-width:90vw;max-height:85vh;overflow:visible;display:flex;justify-content:center;align-items:center}.board-image{max-width:100%;max-height:85vh;width:auto;height:auto;display:block;-o-object-fit:contain;object-fit:contain}.modal-button{padding:12px 32px;font-size:1rem;border:none;border-radius:8px;cursor:pointer;transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease}.modal-button.confirm{background:#4caf50;color:#fff}.modal-button.confirm:hover{background:#388e3c}.game-report-modal{width:90%;max-width:400px;padding:24px}.game-report-modal h3{text-align:center;margin:0 0 20px;font-size:1.5rem;color:#4caf50}.report-content-scrollable{max-height:60vh;overflow-y:visible}.report-section{margin-bottom:20px;padding:16px;background:#f8f9fa;border-radius:10px}.report-section h4{margin:0 0 12px;font-size:1rem;color:#4caf50;border-bottom:1px solid #e8f5e8;padding-bottom:8px}.report-section p{margin:0;font-size:1.2rem;font-weight:600;text-align:center;color:#2e7d32}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.stat-item{display:flex;justify-content:space-between;padding:8px 12px;background:#fff;border-radius:6px;font-size:.9rem}.stat-item.highlight{background:#e8f5e9;font-weight:500}.stat-item.winner{background:#fff3e0;color:#e65100}.stat-item.winner .stat-value{font-weight:700}.stat-label{color:#4a9d50}.stat-value{font-weight:600;color:#2e7d32}.game-report-modal .modal-button{width:100%;margin-top:16px}.difficulty-upgrade-modal{width:90%;max-width:360px;padding:28px;text-align:center;background:linear-gradient(135deg,#fff,#f8fff8)}.difficulty-upgrade-modal h3{margin:0 0 16px;font-size:1.4rem;color:#4caf50}.difficulty-upgrade-modal p{margin:8px 0;font-size:1rem;color:#2e7d32}.difficulty-upgrade-modal .upgrade-info{margin:20px 0;padding:16px;background:#4ecdc41a;border-radius:10px;border:1px solid rgba(78,205,196,.3)}.difficulty-upgrade-modal .upgrade-info strong{color:#4caf50;font-size:1.2rem}.difficulty-upgrade-modal .modal-buttons{display:flex;gap:12px;margin-top:24px}.difficulty-upgrade-modal .modal-button{flex:1;padding:12px 16px;font-size:.95rem}.difficulty-upgrade-modal .modal-button.cancel{background:#f5f5f5;color:#2e7d32;border:1px solid #ddd}.difficulty-upgrade-modal .modal-button.cancel:hover{background:#eee}.difficulty-upgrade-modal .modal-button.confirm{background:#4caf50;color:#fff;box-shadow:0 4px 12px #4caf504d}.difficulty-upgrade-modal .modal-button.confirm:hover{background:#388e3c;transform:translateY(-2px);box-shadow:0 6px 16px #4caf5066}.room-list-page-container{height:100vh;background-color:#f5f5f5;display:flex;flex-direction:column}.room-list-page-header{background-color:#fff;padding:15px 20px;border-bottom:1px solid #e0e0e0;display:flex;align-items:center;justify-content:space-between}.room-list-page-back-btn{background:none;border:none;font-size:24px;cursor:pointer;padding:5px;color:#333}.room-list-page-title{margin:0;font-size:20px;font-weight:600;color:#333}.room-list-page-spacer{width:30px}.room-list-page-content{flex:1;overflow-y:auto;padding:0 20px}.room-list-page-loading,.room-list-page-empty{text-align:center;padding:40px;color:#6c757d;font-size:16px}.room-list-page-list{margin-top:10px}.room-list-page-item{height:90px;margin-bottom:10px;display:flex;align-items:center;gap:15px;padding:0 20px;border-radius:10px;background-color:#fff;border:1px solid #e0e0e0;box-shadow:0 2px 4px #0000000d;box-sizing:border-box}.room-list-page-item-avatar{width:50px;height:50px;flex-shrink:0}.room-list-page-item-info{flex:1;min-width:0}.room-list-page-item-name{font-size:16px;font-weight:600;margin-bottom:4px;color:#333}.room-list-page-item-detail{font-size:14px;color:#6c757d;margin-bottom:2px}.room-list-page-item-detail:last-child{margin-bottom:0}.room-list-page-item-status-full{padding:10px 18px;background-color:#dc3545;color:#fff;border-radius:6px;font-size:14px;font-weight:500;flex-shrink:0}.room-list-page-item-join-btn{padding:10px 20px;background-color:#28a745;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;flex-shrink:0}.room-list-page-footer{background-color:#fff;padding:15px 20px;border-top:1px solid #e0e0e0;text-align:center;font-size:14px;color:#6c757d}@media(max-width:480px){.network-panel{padding:.8rem .6rem 8.5rem;gap:.75rem}.logo-header{gap:8px;margin:.3rem .5rem .1rem;padding:.5rem .8rem;border-radius:12px}.logo-header-img{width:60px;height:60px}.logo-header-text{font-size:1rem;letter-spacing:.5px}.feature-buttons{gap:.5rem;margin:.5rem}.feature-button{padding:.6rem .4rem;border-radius:12px}.button-icon{font-size:1.4rem;margin-bottom:.4rem}.button-icon-img{width:1.4rem;height:1.4rem;margin-bottom:.4rem}.button-text{font-size:.75rem;margin-bottom:.15rem}.button-subtext{font-size:.65rem}.user-info-section{padding:.8rem 1rem;gap:.8rem;margin:.5rem;border-radius:12px}.user-avatar{width:56px;height:56px;border-width:3px}.username{font-size:1rem;margin-bottom:.3rem}.user-title{font-size:.8rem;padding:.2rem .5rem}.top-ad-bar{padding:.5rem .8rem;margin-bottom:.5rem}.ad-label,.ad-value{font-size:.85rem}.ad-video{max-height:140px}.video-ad-label{font-size:.85rem}.room-list-section{margin:.5rem;padding:.8rem;border-radius:10px}.room-list-header-top h4{font-size:.95rem}.room-search{gap:.35rem}.room-search-input{padding:.5rem;font-size:.85rem}.join-room-btn,.refresh-rooms-btn{padding:.5rem .8rem;font-size:.85rem}.room-item{padding:8px 10px;gap:8px}.room-avatar{width:36px;height:36px}.room-status-full,.room-action{padding:6px 10px;font-size:.75rem}.view-more-btn{padding:8px 18px;font-size:.85rem}.status-section{margin:.5rem}.matching-status,.current-room-status{padding:.8rem;gap:.6rem}.status-title{font-size:.9rem}.status-description{font-size:.75rem}.cancel-match-btn,.leave-room-btn{padding:6px 12px;font-size:.75rem}.bottom-nav{padding:.5rem}.nav-item{gap:.2rem;padding:.3rem}.nav-icon{font-size:1.2rem;height:1.2rem;line-height:1.2rem}.nav-icon-img{width:1.2rem;height:1.2rem}.nav-text{font-size:.7rem}.profile-content{padding:.8rem;gap:1rem}.user-profile-header{padding:1rem;gap:.8rem;border-radius:12px}.user-profile-avatar{width:60px;height:60px;border-width:3px}.user-profile-details h3{font-size:1.1rem;margin-bottom:.3rem}.user-wechat{font-size:.85rem}.user-profile-arrow{font-size:1.2rem}.user-status-section{padding:.8rem;gap:.5rem;border-radius:12px}.status-item{padding:.6rem;gap:.3rem;border-radius:10px}.status-icon{font-size:1.5rem}.status-text{font-size:.85rem}.profile-features{gap:1rem}.feature-section{border-radius:12px}.feature-item{padding:1rem}.feature-icon{font-size:1.2rem;margin-right:.6rem}.feature-text,.feature-arrow{font-size:.9rem}.logout-section{margin-top:1rem}.logout-btn{padding:.7rem 2rem;font-size:.9rem}.avatar-selector-content{padding:1rem;width:95%}.avatar-selector-header{margin-bottom:1rem}.avatar-selector-title{font-size:1.1rem}.avatar-grid{grid-template-columns:repeat(4,1fr);gap:.5rem}.friends-container{padding:.5rem}.friends-header{padding:.6rem 0;margin-bottom:1rem}.friends-header h2{font-size:1.1rem}.friends-tabs{margin-bottom:1rem}.tab-btn{padding:.5rem;font-size:.85rem}.friends-search{margin-bottom:1rem}.friends-search-input{padding:.7rem;font-size:.85rem}.friend-item{padding:.7rem;gap:.6rem}.friend-avatar{width:36px;height:36px}.friend-name{font-size:.9rem}.friend-status-text{font-size:.7rem}.friend-actions{gap:.3rem}.friend-action-btn{padding:.3rem .5rem;font-size:.7rem;min-width:44px}.add-friend-section{margin-top:1rem}.add-friend-btn{padding:.7rem 1.5rem;font-size:.9rem}.friend-requests-section{padding:1rem}.friend-requests-section h4{font-size:1rem;margin-bottom:1rem}.friend-request-item{padding:.7rem;gap:.6rem}.friend-request-name{font-size:.9rem}.friend-request-time{font-size:.7rem}.friend-request-btn{padding:.3rem .6rem;font-size:.7rem}.add-friend-modal-content{padding:1.2rem;width:95%}.add-friend-modal-header h3{font-size:1.1rem}.friend-id-input{padding:.7rem;font-size:.9rem}.cancel-btn,.confirm-btn{padding:.6rem 1rem;font-size:.9rem}.tutorial-container{padding:.5rem}.tutorial-header{padding:.6rem 0;margin-bottom:1rem}.tutorial-header h2{font-size:1.1rem}.tutorial-step-card{padding:1rem;border-radius:12px}.tutorial-step-header{margin-bottom:1rem;padding-bottom:.6rem}.tutorial-step-header h2{font-size:.95rem}.step-indicator{padding:.2rem .5rem;font-size:.7rem}.tutorial-step-content{margin-bottom:1rem;font-size:.9rem}.tutorial-step-footer{padding-top:1rem}.tutorial-progress{margin-bottom:1rem}.tutorial-buttons{gap:.5rem}.tutorial-btn{padding:.6rem 1rem;font-size:.85rem;min-width:80px}.customer-service-card{padding:1rem;border-radius:12px}.customer-service-header h3{font-size:1rem}.customer-service-card p{font-size:.85rem;margin-bottom:.6rem}.wechat-contact{padding:.6rem;margin-bottom:.6rem}.wechat-label{font-size:.85rem}.wechat-number{font-size:.85rem;padding:.2rem .5rem}.qr-placeholder{width:90px;height:90px;font-size:.8rem}.modal-overlay{padding:10px}.modal-content{padding:14px;max-width:95vw}.modal-button{padding:10px 20px;font-size:.9rem}.game-report-modal{width:95%;padding:16px}.game-report-modal h3{font-size:1.2rem;margin-bottom:14px}.report-section{margin-bottom:12px;padding:10px}.report-section h4{font-size:.9rem;margin-bottom:8px;padding-bottom:6px}.report-section p{font-size:1rem}.stats-grid{gap:6px}.stat-item{padding:6px 8px;font-size:.8rem}.board-image-modal{gap:10px}.board-image-modal h3{font-size:1.1rem}.difficulty-upgrade-modal{width:95%;padding:20px}.difficulty-upgrade-modal h3{font-size:1.2rem;margin-bottom:12px}.difficulty-upgrade-modal p{font-size:.9rem}.difficulty-upgrade-modal .upgrade-info{margin:14px 0;padding:12px}.difficulty-upgrade-modal .upgrade-info strong{font-size:1rem}.difficulty-upgrade-modal .modal-buttons{gap:8px;margin-top:16px}.difficulty-upgrade-modal .modal-button{padding:10px 12px;font-size:.85rem}.audio-controls-fixed{right:4px}.music-controls{gap:4px;padding:4px;border-radius:20px}.audio-toggle-btn{width:30px;height:30px}.audio-icon{font-size:14px}.room-list-page-header{padding:10px 12px}.room-list-page-back-btn{font-size:20px;padding:4px}.room-list-page-title{font-size:16px}.room-list-page-spacer{width:24px}.room-list-page-content{padding:0 12px}.room-list-page-loading,.room-list-page-empty{padding:30px;font-size:14px}.room-list-page-item{height:auto;min-height:70px;margin-bottom:8px;gap:10px;padding:10px 12px;border-radius:8px}.room-list-page-item-avatar{width:40px;height:40px}.room-list-page-item-name{font-size:14px;margin-bottom:2px}.room-list-page-item-detail{font-size:12px}.room-list-page-item-status-full{padding:6px 12px;font-size:12px}.room-list-page-item-join-btn{padding:6px 14px;font-size:12px}.room-list-page-footer{padding:10px 12px;font-size:12px}.room-info-name-network{font-size:13px}.room-info-detail-network{font-size:11px}.no-rooms-message{padding:20px;font-size:14px}}@media(max-width:480px){.app-container,.network-container{height:100vh;overflow:hidden}.network-panel{padding:.3rem .4rem 3.8rem;gap:.25rem;height:100%;min-height:auto;max-height:100vh;overflow:hidden;box-sizing:border-box}.home-page{display:flex;flex-direction:column;gap:.25rem;height:100%;overflow:hidden}.cat-decoration{display:none}.logo-header{gap:6px;margin:0;padding:.2rem .4rem;border-radius:8px;flex-shrink:0}.logo-header-img{width:36px;height:36px;border-radius:6px}.logo-header-text{font-size:.8rem;letter-spacing:0}.feature-buttons{gap:.25rem;margin:0;flex-shrink:0}.feature-button{padding:.25rem .15rem;border-radius:6px;box-shadow:0 1px 4px #0000000f}.button-icon{font-size:1rem;margin-bottom:.1rem}.button-icon-img{width:1rem;height:1rem;margin-bottom:.1rem}.button-text{font-size:.65rem;margin-bottom:0;line-height:1.2}.button-subtext{font-size:.55rem;line-height:1.2}.user-info-section{padding:.3rem .5rem;gap:.4rem;margin:0;border-radius:6px;box-shadow:0 1px 4px #0000000f;flex-shrink:0}.user-avatar{width:32px;height:32px;border-width:2px}.username{font-size:.8rem;margin-bottom:0}.user-title{font-size:.65rem;padding:.05rem .3rem}.top-ad-bar{padding:.25rem .5rem;margin-bottom:.25rem;font-size:.75rem}.ad-info{gap:.3rem}.ad-label,.ad-value{font-size:.7rem}.status-section{margin:0;flex-shrink:0}.matching-status,.current-room-status{padding:.3rem .5rem;gap:.25rem;border-radius:6px}.status-content{gap:.1rem}.status-title{font-size:.75rem}.status-description{font-size:.65rem}.cancel-match-btn,.leave-room-btn{padding:.2rem .5rem;font-size:.65rem;margin-top:.1rem}.room-list-section{margin:0;padding:.3rem .4rem;border-radius:6px;flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden;box-shadow:0 1px 4px #0000000f}.room-list-header{margin-bottom:.2rem;flex-shrink:0}.room-list-header-top{margin-bottom:.15rem}.room-list-header-top h4{font-size:.75rem}.room-list-header-bottom{gap:.15rem}.room-search{gap:.2rem}.room-search-input{padding:.25rem .4rem;font-size:.7rem;height:26px;border-radius:4px}.join-room-btn{padding:.25rem .5rem;font-size:.7rem;height:26px;border-radius:4px}.refresh-rooms-btn{padding:.25rem .5rem;font-size:.7rem;margin-top:.15rem;border-radius:4px}.room-list{flex:1;overflow-y:auto;margin-bottom:0;min-height:0}.room-item{padding:4px 6px;gap:5px;min-height:38px;border-radius:6px;margin-bottom:3px}.room-avatar{width:24px;height:24px}.room-status-full,.room-action{padding:3px 6px;font-size:.65rem;border-radius:4px}.room-list-footer{margin-top:.2rem;flex-shrink:0}.view-more-btn{padding:4px 10px;font-size:.7rem;border-radius:4px}.bottom-nav{padding:.2rem;height:auto;min-height:48px}.nav-item{gap:.05rem;padding:.15rem}.nav-icon{font-size:.9rem;height:.9rem;line-height:.9rem}.nav-icon-img{width:.9rem;height:.9rem}.nav-text{font-size:.6rem}.nav-badge{width:14px;height:14px;font-size:.6rem}.profile-container{height:calc(100vh - 55px);overflow:hidden}.profile-content{padding:.3rem .4rem;gap:.3rem;overflow:hidden;height:100%}.user-profile-header{padding:.4rem .5rem;gap:.4rem;border-radius:6px;flex-shrink:0}.user-profile-avatar{width:36px;height:36px;border-width:2px}.user-profile-details h3{font-size:.85rem;margin-bottom:0}.user-wechat{font-size:.65rem}.user-profile-arrow{font-size:.9rem}.user-status-section{padding:.3rem;gap:.2rem;border-radius:6px;flex-shrink:0}.status-item{padding:.25rem;gap:.1rem;border-radius:4px}.status-icon{font-size:1rem}.status-text{font-size:.7rem}.profile-features{gap:.25rem;flex-shrink:0}.feature-section{border-radius:6px}.feature-item{padding:.35rem .5rem}.feature-icon{font-size:.9rem;margin-right:.3rem}.feature-text,.feature-arrow{font-size:.75rem}.logout-section{margin-top:.2rem;flex-shrink:0}.logout-btn{padding:.3rem 1.2rem;font-size:.75rem;border-radius:4px}.avatar-selector{z-index:var(--z-max)}.avatar-selector-content{padding:.6rem;width:95%}.avatar-selector-title{font-size:.9rem}.avatar-grid{grid-template-columns:repeat(5,1fr);gap:.3rem}.friends-container{padding:.3rem .4rem;height:calc(100vh - 55px);display:flex;flex-direction:column;overflow:hidden}.friends-header{padding:.2rem 0;margin-bottom:.2rem;flex-shrink:0}.friends-header h2{font-size:.85rem}.back-btn{padding:.2rem .4rem;font-size:.8rem;gap:.2rem}.back-icon{font-size:.9rem}.friends-tabs{margin-bottom:.2rem;flex-shrink:0;padding:.15rem;border-radius:6px}.tab-btn{padding:.25rem;font-size:.7rem;border-radius:4px}.request-badge{width:16px;height:16px;font-size:.6rem;top:-3px;right:-3px}.friends-search{margin-bottom:.2rem;flex-shrink:0}.friends-search-input{padding:.3rem .5rem;font-size:.7rem;height:26px;border-radius:4px}.friends-tab-content{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}.friends-list{flex:1;overflow-y:auto;margin-bottom:0;gap:.2rem;min-height:0}.friend-item{padding:.3rem .4rem;gap:.3rem;min-height:32px;border-radius:6px}.friend-avatar{width:24px;height:24px}.friend-name{font-size:.75rem;margin-bottom:0}.friend-status-text{font-size:.6rem}.friend-actions{gap:.15rem}.friend-action-btn{padding:.2rem .3rem;font-size:.6rem;min-width:32px;border-radius:3px}.add-friend-section{margin-top:.2rem;flex-shrink:0}.add-friend-btn{padding:.3rem .8rem;font-size:.75rem;border-radius:4px}.friend-requests-section{padding:.4rem;flex:1;overflow-y:auto;border-radius:6px}.friend-requests-section h4{font-size:.8rem;margin-bottom:.2rem}.friend-request-item{padding:.3rem .4rem;gap:.3rem}.friend-request-name{font-size:.75rem;margin-bottom:0}.friend-request-time{font-size:.6rem}.friend-request-btn{padding:.2rem .3rem;font-size:.6rem;min-width:32px;border-radius:3px}.add-friend-modal-content{padding:.8rem;width:95%}.add-friend-modal-header h3{font-size:.9rem}.friend-id-input{padding:.4rem;font-size:.8rem;height:28px}.cancel-btn,.confirm-btn{padding:.4rem .8rem;font-size:.8rem}.tutorial-container{padding:.3rem .4rem;height:calc(100vh - 55px);display:flex;flex-direction:column;overflow:hidden}.tutorial-header{padding:.2rem 0;margin-bottom:.2rem;flex-shrink:0}.tutorial-header h2{font-size:.85rem}.tutorial-main-content{flex:1;overflow-y:auto;min-height:0}.tutorial-step-card{padding:.5rem;border-radius:6px;margin-bottom:.3rem}.tutorial-step-header{margin-bottom:.3rem;padding-bottom:.2rem}.tutorial-step-header h2{font-size:.8rem}.step-indicator{padding:.1rem .3rem;font-size:.6rem}.tutorial-step-content{margin-bottom:.3rem;font-size:.75rem;line-height:1.3}.tutorial-step-footer{padding-top:.3rem}.tutorial-progress{margin-bottom:.3rem;gap:.3rem}.progress-dot{width:6px;height:6px}.progress-dot.active{width:8px;height:8px}.tutorial-buttons{gap:.25rem}.tutorial-btn{padding:.3rem .5rem;font-size:.7rem;min-width:50px}.customer-service-card{padding:.5rem;border-radius:6px}.customer-service-header{margin-bottom:.3rem}.customer-service-header h3{font-size:.8rem}.customer-service-card p{font-size:.75rem;margin-bottom:.3rem}.settings-page-container{height:calc(100vh - 55px);overflow:hidden}.settings-page-header{padding:.4rem .6rem;border-radius:0 0 12px 12px;margin-bottom:.3rem;flex-shrink:0}.settings-page-header h2{font-size:.9rem}.settings-back-btn{font-size:1rem;padding:.3rem .4rem;border-radius:8px}.settings-page-content{padding:0 .4rem;flex:1;overflow:hidden;display:flex;flex-direction:column}.settings-page-modal{border-radius:10px;max-height:100%;flex:1;display:flex;flex-direction:column;overflow:hidden}.settings-page-section{padding:.5rem;overflow-y:auto;flex:1}.settings-page-section h3{font-size:.8rem;margin-bottom:.3rem}.setting-item{padding:.35rem 0}.setting-icon{font-size:1rem}.setting-name{font-size:.8rem}.setting-description{font-size:.65rem}.color-settings-expanded{padding:.4rem;margin-top:.25rem}.color-setting-subitem{margin-bottom:.5rem}.color-picker-row{gap:.4rem;margin-bottom:.3rem}.color-input-small{width:32px;height:24px}.color-value-small{font-size:.7rem}.color-presets-small{gap:.2rem}.color-preset-btn-small{width:14px;height:14px}.preview-section-small svg{width:80px;height:40px}.color-actions-small{margin-top:.3rem;gap:.4rem}.reset-btn-small,.save-btn-small{padding:.3rem .4rem;font-size:.75rem}.save-message-small{margin-top:.4rem;padding:.3rem;font-size:.75rem}.toggle-switch{width:40px;height:22px}.toggle-slider:before{height:18px;width:18px;left:2px;bottom:2px}input:checked+.toggle-slider:before{transform:translate(18px)}.auth-page-container{padding:6px 10px;height:100%;min-height:unset;justify-content:center;gap:8px;overflow:hidden}.auth-page-title{font-size:1.1rem}.auth-illustration{width:64px;height:64px;margin-bottom:2px}.auth-form-section{max-width:100%;gap:12px}.auth-input-wrapper{border-radius:6px}.auth-input-field{padding:6px 8px;font-size:.8rem}.auth-password-toggle{padding:6px;font-size:.85rem}.auth-primary-btn{padding:8px;font-size:.85rem;border-radius:6px;margin-top:8px}.auth-wechat-btn{padding:8px;font-size:.8rem;border-radius:6px}.auth-error{padding:5px 8px;font-size:.7rem}.auth-user-info{padding:8px;gap:6px}.auth-button{padding:5px 10px;font-size:.75rem}.user-email{font-size:.85rem}.modal-overlay{padding:8px}.modal-content{padding:10px;max-width:95vw;max-height:85vh;overflow:visible}.modal-button{padding:8px 16px;font-size:.8rem}.game-report-modal{width:95%;padding:10px}.game-report-modal h3{font-size:.9rem;margin-bottom:6px}.report-content-scrollable{max-height:45vh;overflow-y:visible}.report-section{margin-bottom:6px;padding:6px;border-radius:6px}.report-section h4{font-size:.8rem;margin-bottom:4px;padding-bottom:4px}.report-section p{font-size:.85rem}.stats-grid{gap:4px}.stat-item{padding:4px 6px;font-size:.7rem}.difficulty-upgrade-modal{width:95%;padding:12px}.difficulty-upgrade-modal h3{font-size:.95rem;margin-bottom:6px}.difficulty-upgrade-modal p{font-size:.8rem}.difficulty-upgrade-modal .upgrade-info{margin:6px 0;padding:6px;border-radius:6px}.difficulty-upgrade-modal .upgrade-info strong{font-size:.9rem}.difficulty-upgrade-modal .modal-buttons{gap:6px;margin-top:10px}.difficulty-upgrade-modal .modal-button{padding:8px 10px;font-size:.8rem}.board-image-modal h3{font-size:.9rem}.audio-controls-fixed{right:4px}.music-controls{gap:2px;padding:2px;border-radius:16px}.audio-toggle-btn{width:26px;height:26px}.audio-icon{font-size:12px}.room-list-page-container{height:100vh}.room-list-page-header{padding:8px 10px;flex-shrink:0}.room-list-page-title{font-size:14px}.room-list-page-back-btn{font-size:18px;padding:3px}.room-list-page-content{padding:0 10px}.room-list-page-item{min-height:48px;margin-bottom:5px;gap:8px;padding:6px 10px;border-radius:6px}.room-list-page-item-avatar{width:32px;height:32px}.room-list-page-item-name{font-size:12px;margin-bottom:1px}.room-list-page-item-detail{font-size:11px}.room-list-page-item-status-full,.room-list-page-item-join-btn{padding:4px 8px;font-size:11px;border-radius:4px}.room-list-page-footer{padding:8px;font-size:11px;flex-shrink:0}.loading-message,.no-friends-message,.no-friend-requests,.no-rooms-message{padding:.8rem;font-size:.75rem}.model-viewer-floater{width:80px!important;height:80px!important}.model-viewer-close{opacity:1;width:18px;height:18px;font-size:12px}.model-viewer-loading{font-size:10px}.model-viewer-error{font-size:16px}.feature-buttons-new{gap:.3rem;margin:.2rem 0;flex-shrink:0;grid-template-columns:repeat(3,1fr)}.feature-button-new{filter:drop-shadow(0 2px 4px rgba(0,0,0,.12))}.nav-icon-sprite{width:1.6rem;height:1.6rem;background-size:406px 237px}}.feature-buttons-new{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;margin:.8rem .5rem;justify-items:center;position:relative}.feature-buttons-new:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:120%;height:150%;background:radial-gradient(ellipse,rgba(78,205,196,.08) 0%,transparent 70%);pointer-events:none;z-index:-1}.feature-button-new{cursor:pointer;transition:filter .3s ease;filter:drop-shadow(0 6px 12px rgba(0,0,0,.18));border-radius:0;overflow:hidden;position:relative}.feature-button-new:after{content:"";position:absolute;inset:-5px;border-radius:8px;background:radial-gradient(ellipse,rgba(78,205,196,.15) 0%,transparent 70%);opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:-1}.feature-button-new:hover:after{opacity:1}.feature-button-new:hover{filter:drop-shadow(0 10px 20px rgba(0,0,0,.25)) brightness(1.08)}.feature-button-new:active{filter:drop-shadow(0 2px 4px rgba(0,0,0,.2)) brightness(.95)}@media(min-width:769px){.feature-buttons-new{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:0rem;margin:.5rem auto;flex-wrap:nowrap;width:100%;max-width:1400px;padding:0 2rem;box-sizing:border-box}.sprite-btn{background-image:url(/emo/sprite-sheet-pc.png);background-repeat:no-repeat}.match-btn-new,.ranking-btn-new,.create-room-btn-new{height:140px;flex-shrink:0;flex-grow:0;background-repeat:no-repeat;background-size:850px 425px}.create-room-btn-new{background-position:-25px -250px;width:280px}.create-room-btn-new:hover:after{background:radial-gradient(ellipse,rgba(33,188,161,.2) 0%,transparent 70%)}.match-btn-new{background-position:-300px -250px;width:245px}.match-btn-new:hover:after{background:radial-gradient(ellipse,rgba(156,39,176,.2) 0%,transparent 70%)}.ranking-btn-new{background-position:-548px -250px;width:260px}.ranking-btn-new:hover:after{background:radial-gradient(ellipse,rgba(78,205,196,.2) 0%,transparent 70%)}}@media(max-width:768px){.sprite-btn{background-image:url(/emo/sprite-sheet.png);background-repeat:no-repeat}:root{--sprite-scale: .5}.match-btn-new{background-position:calc(-420px * var(--sprite-scale)) calc(-350.5px * var(--sprite-scale));width:calc(270px * var(--sprite-scale));height:calc(385px * var(--sprite-scale));background-size:calc(1523px * var(--sprite-scale)) auto}.match-btn-new:hover:after{background:radial-gradient(ellipse,rgba(156,39,176,.2) 0%,transparent 70%)}.ranking-btn-new{background-position:calc(-741px * var(--sprite-scale)) calc(-350.5px * var(--sprite-scale));width:calc(271px * var(--sprite-scale));height:calc(385px * var(--sprite-scale));background-size:calc(1523px * var(--sprite-scale)) auto}.ranking-btn-new:hover:after{background:radial-gradient(ellipse,rgba(255,193,7,.2) 0%,transparent 70%)}.create-room-btn-new{background-position:calc(-1057px * var(--sprite-scale)) calc(-350.5px * var(--sprite-scale));width:calc(275px * var(--sprite-scale));height:calc(385px * var(--sprite-scale));background-size:calc(1523px * var(--sprite-scale)) auto}.create-room-btn-new:hover:after{background:radial-gradient(ellipse,rgba(78,205,196,.2) 0%,transparent 70%)}}.feature-buttons,.feature-button,.button-icon,.button-icon-img,.button-text,.button-subtext,.create-room-btn,.ranking-btn,.match-btn{display:none}.difficulty-toggle-container{display:flex;justify-content:center;align-items:center;width:100%}.difficulty-select{padding:8px 32px 8px 16px;border:2px solid #4CAF50;border-radius:20px;font-size:14px;font-weight:600;background-color:#fff;color:#4caf50;cursor:pointer;transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease;min-width:120px;text-align:left;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='292.4' height='292.4'%3E%3Cpath fill='%234CAF50' d='M287 69.4a17.6 17.6 0 0 0-13-5.4H18.4c-5 0-9.3 1.8-12.9 5.4A17.6 17.6 0 0 0 0 82.2c0 5 1.8 9.3 5.4 12.9l128 127.9c3.6 3.6 7.8 5.4 12.8 5.4s9.2-1.8 12.8-5.4L287 95c3.5-3.5 5.4-7.8 5.4-12.8 0-5-1.9-9.2-5.5-12.8z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px top 50%;background-size:10px auto}.difficulty-select option{background:#fff;color:#4caf50;padding:8px;font-weight:600}.difficulty-select:hover{background-color:#4caf50;color:#fff;transform:translateY(-2px);box-shadow:0 4px 8px #4caf5033;background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='292.4' height='292.4'%3E%3Cpath fill='%23ffffff' d='M287 69.4a17.6 17.6 0 0 0-13-5.4H18.4c-5 0-9.3 1.8-12.9 5.4A17.6 17.6 0 0 0 0 82.2c0 5 1.8 9.3 5.4 12.9l128 127.9c3.6 3.6 7.8 5.4 12.8 5.4s9.2-1.8 12.8-5.4L287 95c3.5-3.5 5.4-7.8 5.4-12.8 0-5-1.9-9.2-5.5-12.8z'/%3E%3C/svg%3E")}.difficulty-select:active{transform:translateY(0);box-shadow:0 2px 4px #4caf5033}.difficulty-select:focus{outline:none}@media(max-width:768px){.difficulty-select{padding:6px 26px 6px 12px;font-size:12px;min-width:100px;background-position:right 8px top 50%;background-size:9px auto}}.bottom-control-panel{position:relative;width:100%;background-color:#1a1a2ef2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 -4px 20px #0003;border-top:1px solid rgba(78,205,196,.2);transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1),background-color .3s cubic-bezier(.4,0,.2,1),color .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1),border-color .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column-reverse;z-index:100;flex-shrink:0}.bottom-control-panel.expanded{max-height:min(500px,45vh);overflow-y:auto;box-shadow:0 -6px 25px #00000040}.bottom-control-panel.collapsed{max-height:55px;overflow:hidden}.control-panel-toggle{width:100%;padding:.9rem;background:linear-gradient(135deg,#4ecdc433,#4ecdc41a);color:#4ecdc4;border:none;border-radius:0;font-size:1rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.6rem;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1),background-color .3s cubic-bezier(.4,0,.2,1),color .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1),border-color .3s cubic-bezier(.4,0,.2,1);order:1;border-top:1px solid rgba(78,205,196,.1)}.control-panel-toggle:hover{background:linear-gradient(135deg,#4ecdc44d,#4ecdc433);color:#45b7aa;transform:translateY(-1px)}.control-panel-toggle:active{transform:translateY(0)}.control-panel-content{padding:1.5rem;overflow-y:auto;background-color:#1a1a2ee6;max-height:550px;order:2;border-top:1px solid rgba(78,205,196,.1)}.control-panel-content::-webkit-scrollbar{width:6px}.control-panel-content::-webkit-scrollbar-track{background:#ffffff0d;border-radius:3px}.control-panel-content::-webkit-scrollbar-thumb{background:#4ecdc44d;border-radius:3px;-webkit-transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease;transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease}.control-panel-content::-webkit-scrollbar-thumb:hover{background:#4ecdc480}@media(min-width:1024px){.local-game-interface>.bottom-control-panel{flex-direction:column;overflow:hidden}.local-game-interface>.bottom-control-panel.expanded,.local-game-interface>.bottom-control-panel.collapsed{max-height:100vh;overflow:hidden}.local-game-interface>.bottom-control-panel .control-panel-content{max-height:100vh;overflow:hidden;order:0}}@media(max-width:768px){.control-panel-content{padding:1.2rem}.bottom-control-panel.expanded{max-height:min(400px,50vh)}}@media(max-width:480px){.control-panel-toggle{padding:.7rem;font-size:.9rem}.control-panel-content{padding:1rem}.bottom-control-panel.expanded{max-height:min(350px,55vh)}}.control-panel-content h3{color:#4ecdc4;margin-bottom:1.5rem;font-size:1.3rem;text-align:center;border-bottom:1px solid rgba(78,205,196,.2);padding-bottom:1rem;font-family:var(--font-family-base);font-weight:700;letter-spacing:1px;text-shadow:0 0 10px rgba(78,205,196,.2)}.control-section{margin-bottom:1.5rem;padding:1.5rem;background:#ffffff08;border-radius:12px;border:1px solid rgba(78,205,196,.1);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1),background-color .3s cubic-bezier(.4,0,.2,1),color .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1),border-color .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #0000001a}.control-section:hover{box-shadow:0 4px 12px #00000026;border-color:#4ecdc433;transform:translateY(-1px)}.control-section h4{color:#4ecdc4;margin-bottom:1rem;font-size:1.1rem;font-weight:600;font-family:var(--font-family-base);letter-spacing:.5px;display:flex;align-items:center;gap:.5rem}.control-section h4:before{content:"•";color:#4ecdc4;font-size:1.2rem}.control-item{margin-bottom:1rem;display:flex;flex-direction:column;gap:.5rem}.control-item label{color:#ffffffb3;font-size:.9rem;font-family:var(--font-family-base);font-weight:500}.control-item select,.control-item input[type=range]{width:100%;padding:.7rem;border:1px solid rgba(78,205,196,.2);border-radius:8px;font-size:.9rem;background:#ffffff0d;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1),background-color .3s cubic-bezier(.4,0,.2,1),color .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1),border-color .3s cubic-bezier(.4,0,.2,1);font-family:var(--font-family-base);color:#4ecdc4;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='292.4' height='292.4'%3E%3Cpath fill='%234ecdc4' d='M287 69.4a17.6 17.6 0 0 0-13-5.4H18.4c-5 0-9.3 1.8-12.9 5.4A17.6 17.6 0 0 0 0 82.2c0 5 1.8 9.3 5.4 12.9l128 127.9c3.6 3.6 7.8 5.4 12.8 5.4s9.2-1.8 12.8-5.4L287 95c3.5-3.5 5.4-7.8 5.4-12.8 0-5-1.9-9.2-5.5-12.8z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .7em top 50%;background-size:.65em auto}.control-item select option{background:#1a1a2e;color:#4ecdc4;padding:.5rem}.control-item select:focus,.control-item input[type=range]:focus{outline:none;border-color:#4ecdc4;box-shadow:0 0 0 3px #4ecdc41a;background:#ffffff14}.control-item input[type=range]{padding:.5rem 0}.control-item input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#4ecdc4;cursor:pointer;-webkit-transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease;transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease;box-shadow:0 2px 6px #4ecdc44d}.control-item input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 3px 8px #4ecdc466}.control-item input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#4ecdc4;cursor:pointer;border:none;-moz-transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease;transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease;box-shadow:0 2px 6px #4ecdc44d}.control-item input[type=range]::-moz-range-thumb:hover{transform:scale(1.1);box-shadow:0 3px 8px #4ecdc466}.control-item span{color:#4ecdc4;font-weight:600;align-self:flex-end;margin-top:-.5rem;margin-right:.5rem;font-family:var(--font-family-base);font-size:.85rem}.color-info{margin-bottom:1rem;background:#ffffff08;padding:1.2rem;border-radius:10px;border:1px solid rgba(78,205,196,.1);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease}.color-info:hover{border-color:#4ecdc433;box-shadow:0 2px 8px #4ecdc41a}.color-info p{margin:.5rem 0;color:#fffc;font-size:.9rem;font-family:var(--font-family-base);display:flex;align-items:center;gap:.5rem}.color-info strong{color:#4ecdc4;font-weight:600}.ai-thinking{color:#ffffffb3;font-size:.9rem;margin-top:.8rem;text-align:center;background:#4ecdc414;padding:.8rem;border-radius:8px;border:1px solid rgba(78,205,196,.2);font-family:var(--font-family-base);animation:pulse 2s infinite}@keyframes pulse{0%{box-shadow:0 0 #4ecdc466}70%{box-shadow:0 0 0 10px #4ecdc400}to{box-shadow:0 0 #4ecdc400}}.toggle-switch{position:relative;display:inline-block;width:60px;height:34px;margin:.8rem 0}.toggle-label{position:absolute;cursor:pointer;inset:0;background:#ffffff1a;transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .4s cubic-bezier(.4,0,.2,1),background-color .4s cubic-bezier(.4,0,.2,1),color .4s cubic-bezier(.4,0,.2,1),box-shadow .4s cubic-bezier(.4,0,.2,1),border-color .4s cubic-bezier(.4,0,.2,1);border-radius:34px;border:1px solid rgba(78,205,196,.2)}.toggle-label:before{position:absolute;content:"";height:26px;width:26px;left:3px;bottom:3px;background:#4ecdc4;transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .4s cubic-bezier(.4,0,.2,1),background-color .4s cubic-bezier(.4,0,.2,1),color .4s cubic-bezier(.4,0,.2,1),box-shadow .4s cubic-bezier(.4,0,.2,1),border-color .4s cubic-bezier(.4,0,.2,1);border-radius:50%;box-shadow:0 2px 4px #0003}input:checked+.toggle-label{background:#4ecdc433;border-color:#4ecdc44d}input:focus+.toggle-label{box-shadow:0 0 0 3px #4ecdc41a}input:checked+.toggle-label:before{transform:translate(26px);background:#45b7aa}input:disabled+.toggle-label{background:#ffffff0d;border-color:#4ecdc41a;cursor:not-allowed}input:disabled+.toggle-label:before{background:#4ecdc480}.toggle-description{font-size:.8rem;color:#fff9;margin-top:.5rem;margin-bottom:0;font-family:var(--font-family-base)}.control-buttons{display:flex;flex-direction:column;gap:.8rem}.control-button{padding:1rem 1.5rem;border:1px solid rgba(78,205,196,.2);border-radius:10px;font-size:.95rem;font-weight:600;cursor:pointer;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1),background-color .3s cubic-bezier(.4,0,.2,1),color .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1),border-color .3s cubic-bezier(.4,0,.2,1);background:#ffffff08;color:#4ecdc4;font-family:var(--font-family-game-control);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);position:relative;overflow:hidden}.control-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(78,205,196,.1),transparent);transition:transform .6s ease,opacity .6s ease,background-color .6s ease,color .6s ease,box-shadow .6s ease,border-color .6s ease}.control-button:hover:before{left:100%}.control-button.resign-button{font-size:.9rem;border-color:#ff6b6b4d;color:#ff6b6b;background:#ff6b6b0d}.control-button.resign-button:hover:before{background:linear-gradient(90deg,transparent,rgba(255,107,107,.1),transparent)}.control-button:hover:not(:disabled){background:#4ecdc41a;color:#45b7aa;border-color:#4ecdc466;transform:translateY(-2px);box-shadow:0 4px 12px #4ecdc433}.control-button.resign-button:hover:not(:disabled){background:#ff6b6b1a;color:#ff5252;border-color:#ff6b6b80;box-shadow:0 4px 12px #ff6b6b33}.control-button:active{transform:translateY(0)}.control-button:disabled{background:#ffffff08;color:#ffffff4d;border-color:#ffffff1a;cursor:not-allowed;box-shadow:none}.reset-button{background:#ffffff08;color:#4ecdc4;border:1px solid rgba(78,205,196,.2)}.reset-button:hover:not(:disabled){background:#4ecdc41a;color:#45b7aa;border-color:#4ecdc466}.control-button.ai-judge-button{background:#ffffff08;color:#4ecdc4;border:1px solid rgba(78,205,196,.2)}.control-button.ai-judge-button:disabled{background:#ffffff08;color:#ffffff4d;border-color:#ffffff1a;cursor:not-allowed}@media(max-width:768px){.control-section{padding:1.2rem}.control-panel-content h3{margin-bottom:1.5rem;padding-bottom:.8rem}.control-button{padding:.9rem 1.2rem}.color-info{padding:1rem}}@media(hover:none)and (pointer:coarse){.control-button{transition:transform .15s ease,opacity .15s ease,background-color .15s ease,color .15s ease,box-shadow .15s ease,border-color .15s ease}.control-button:active:not(:disabled){transform:scale(.95)}}.network-status{display:flex;flex-direction:column;align-items:center;margin-bottom:2rem;padding:1rem;background-color:var(--color-surface);border-radius:8px;font-size:.9rem;border:1px solid var(--color-border)}.connection-indicator{font-weight:600;margin-bottom:.5rem;font-family:var(--font-family-room-management)}.connection-indicator.connected{color:var(--color-primary)}.connection-indicator.disconnected{color:var(--color-text-light)}.current-user{color:var(--color-text-light);font-size:.8rem;font-family:var(--font-family-base)}.auth-section,.network-section{margin-bottom:2rem;padding:1.5rem;background-color:var(--color-surface);border-radius:8px;border:1px solid var(--color-border)}.auth-container{display:flex;flex-direction:column;gap:1.2rem}.auth-container h3{margin-bottom:.8rem;font-size:1.2rem;text-align:center;border-bottom:none;padding-bottom:0;font-family:var(--font-family-base)}.auth-error{color:var(--color-text-light);background-color:#5d40371a;padding:.8rem;border-radius:8px;font-size:.8rem;text-align:center;border:1px solid var(--color-border);font-family:var(--font-family-error)}.auth-form{display:flex;flex-direction:column;gap:1rem}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-group label{color:var(--color-text-light);font-size:.9rem;font-family:var(--font-family-base)}.form-group input{width:100%;padding:.6rem;border:1px solid var(--color-border);border-radius:8px;font-size:.9rem;background-color:var(--color-surface);transition:border-color .3s ease;font-family:var(--font-family-base);color:var(--color-text)}.form-group input:focus{outline:none;border-color:var(--color-primary)}.auth-button{padding:.8rem 1.2rem;border:1px solid var(--color-border);border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease;background-color:var(--color-surface);color:var(--color-primary);font-family:var(--font-family-room-management)}.auth-button:hover:not(:disabled){background-color:var(--color-primary);color:var(--color-light);transform:translateY(-1px)}.auth-button:active{transform:translateY(0)}.auth-button:disabled{background-color:var(--color-border);color:var(--color-text-light);cursor:not-allowed;transform:none}.auth-switch{display:flex;justify-content:center;align-items:center;gap:.5rem;font-size:.9rem;color:var(--color-text-light);font-family:var(--font-family-base)}.auth-switch-button{background:none;border:none;color:var(--color-primary);cursor:pointer;font-size:.9rem;font-weight:600;padding:0;text-decoration:underline;font-family:var(--font-family-base)}.auth-switch-button:hover{color:var(--color-accent)}.room-manager{display:flex;flex-direction:column;gap:1.2rem}.room-manager h3{margin-bottom:.8rem;font-size:1.2rem;text-align:center;border-bottom:none;padding-bottom:0;font-family:var(--font-family-base)}.room-error{color:var(--color-text-light);background-color:#5d40371a;padding:.8rem;border-radius:8px;font-size:.8rem;text-align:center;border:1px solid var(--color-border);font-family:var(--font-family-error)}.room-options{display:flex;flex-direction:column;gap:1.5rem}.create-room-section,.join-room-section{display:flex;flex-direction:column;gap:1rem}.create-room-section h3,.join-room-section h3{margin-bottom:.8rem;font-size:1.1rem;text-align:center;border-bottom:1px solid var(--color-border);padding-bottom:.8rem;font-family:var(--font-family-base)}.current-room{display:flex;flex-direction:column;gap:.3rem;padding:.4rem;margin-top:0}.current-room h3{font-size:.95rem;margin:0;text-align:center;line-height:1.2}.current-room h4{font-size:.85rem;margin:0;line-height:1.2}.room-info{display:flex;flex-direction:column;gap:.2rem;background-color:var(--color-surface);padding:.4rem;border-radius:8px;border:1px solid var(--color-border)}.room-info p{margin:0;font-size:.85rem;line-height:1.3}.players-list{display:flex;flex-direction:column;gap:.2rem}.player-item{display:flex;align-items:center;background-color:var(--color-surface);padding:.3rem .5rem;border-radius:8px;border:1px solid var(--color-border);font-size:.85rem;font-family:var(--font-family-base);flex-wrap:wrap;gap:.3rem;line-height:1.3}.player-item>span:first-of-type{flex:1;min-width:120px}.player-item>span:not(:first-child){margin-left:auto}.player-item>span+span{margin-left:.8rem}.player-status{font-size:.75rem;font-weight:600;padding:.2rem .5rem;border-radius:16px;font-family:var(--font-family-base)}.player-status.ready{color:var(--color-primary);background-color:#3e27231a;border:1px solid var(--color-primary)}.player-status.not-ready{color:var(--color-text-light);background-color:#5d40371a;border:1px solid var(--color-text-light)}.player-color{font-size:.75rem;font-weight:600;padding:.2rem .5rem;border-radius:16px;background-color:var(--color-background);border:1px solid var(--color-border);font-family:var(--font-family-base)}.kick-button{padding:.4rem .8rem;border:1px solid var(--color-border);border-radius:6px;font-size:.8rem;font-weight:600;cursor:pointer;transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease;background-color:var(--color-surface);color:#ff6b6b;margin-right:.5rem;font-family:var(--font-family-base)}.kick-button:hover{background-color:#ff6b6b;color:#fff;transform:translateY(-1px)}.kick-button:active{transform:translateY(0)}.room-actions,.game-started{display:flex;flex-direction:row;gap:.5rem;align-items:center;justify-content:center}.room-actions .action-button{padding:.4rem .8rem;font-size:.8rem;flex:1;max-width:120px}.matchmaking{display:flex;flex-direction:column;gap:1.2rem}.matchmaking h3{margin-bottom:.8rem;font-size:1.2rem;text-align:center;border-bottom:none;padding-bottom:0;font-family:var(--font-family-base)}.match-queue-details{margin:.8rem 0;text-align:center}.match-queue-sizes{display:flex;gap:1rem;flex-wrap:nowrap;overflow-x:auto;padding:.5rem 0;justify-content:center}.match-queue-size{font-size:1rem;white-space:nowrap;color:var(--color-text)}.match-queue-sizes::-webkit-scrollbar{height:4px}.match-queue-sizes::-webkit-scrollbar-track{background:var(--color-background);border-radius:2px}.match-queue-sizes::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:2px}.match-queue-sizes::-webkit-scrollbar-thumb:hover{background:var(--color-text-light)}.matching-in-progress,.not-matching{display:flex;flex-direction:column;gap:1rem;align-items:center}.matching-status{display:flex;flex-direction:column;gap:.5rem;text-align:center;font-family:var(--font-family-base);padding:1rem;background-color:#2196f34d;border-radius:8px;border:1px solid rgba(33,150,243,.6);box-shadow:0 2px 8px #2196f366;margin:.5rem 0}.action-button{padding:.8rem 1.2rem;border:1px solid var(--color-border);border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease;background-color:var(--color-surface);color:var(--color-primary);width:100%;font-family:var(--font-family-game-control)}.action-button:hover:not(:disabled){background-color:var(--color-primary);color:var(--color-light);transform:translateY(-1px)}.action-button:active{transform:translateY(0)}.action-button:disabled{background-color:var(--color-border);color:var(--color-text-light);cursor:not-allowed;transform:none}.action-button.primary{background-color:var(--color-surface);color:var(--color-primary);border:1px solid var(--color-border)}.action-button.primary:hover:not(:disabled){background-color:var(--color-primary);color:var(--color-light)}.action-button.secondary{background-color:var(--color-surface);color:var(--color-primary);border:1px solid var(--color-border)}.action-button.secondary:hover:not(:disabled){background-color:var(--color-accent);color:var(--color-light)}.ai-status{margin-top:1rem;display:flex;flex-direction:column;gap:.8rem}.ai-thinking-status{display:flex;flex-direction:column;gap:.8rem}.ai-thinking-indicator{display:flex;align-items:center;gap:.8rem;color:var(--color-primary);font-weight:600;padding:1rem;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;font-family:var(--font-family-base)}.spinner{display:inline-block;width:20px;height:20px;border:2px solid rgba(62,39,35,.3);border-radius:50%;border-top-color:var(--color-primary);animation:spin 1s ease-in-out infinite}.ai-mode-info{font-size:.8rem;color:var(--color-text-light);margin:0;padding:0 1rem;font-family:var(--font-family-base)}.ai-ready-status{display:flex;align-items:center;gap:.8rem;color:var(--color-primary);font-weight:600;padding:1rem;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;font-family:var(--font-family-base)}.ai-ready-indicator{display:inline-block;width:12px;height:12px;background-color:var(--color-primary);border-radius:50%;animation:pulse 2s infinite}@keyframes pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.7}to{transform:scale(1);opacity:1}}@media(max-width:768px){.ai-thinking-indicator,.ai-ready-status{flex-direction:column;align-items:center;text-align:center;gap:.8rem}.spinner{margin-bottom:.5rem}.control-section{padding:1.2rem}.control-panel-content h3{margin-bottom:1.5rem;padding-bottom:.8rem}}.control-button.resign-button{background-color:var(--color-surface);color:red;border:1px solid var(--color-border)}.control-button.resign-button:hover:not(:disabled){background-color:var(--color-primary);color:var(--color-light)}.control-button.resign-button:disabled{background-color:var(--color-border);color:var(--color-text-light);cursor:not-allowed}.control-button.ai-judge-button:hover:not(:disabled){background:#4ecdc41a;color:#45b7aa;border-color:#4ecdc466;box-shadow:0 4px 12px #4ecdc433}.control-button.ai-judge-button:disabled{background:#ffffff08;color:#ffffff4d;border-color:#ffffff1a;cursor:not-allowed;box-shadow:none}.placement-confirm-buttons{position:absolute;bottom:100%;left:0;right:0;display:flex;flex-direction:row;justify-content:center;gap:0;padding:0;background:linear-gradient(135deg,#1a1a2efa,#1a1a2ef2);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid rgba(78,205,196,.3);border-bottom:1px solid rgba(78,205,196,.2);box-shadow:0 -4px 20px #0000004d;z-index:200;animation:placementConfirmSlideUp .25s ease-out;width:100%;box-sizing:border-box}@keyframes placementConfirmSlideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.placement-confirm-button{padding:.6rem 1.8rem;font-size:1rem;font-weight:700;background:linear-gradient(135deg,#4ecdc433,#4ecdc41a);border:2px solid rgba(78,205,196,.4);color:#4ecdc4;box-shadow:0 0 15px #4ecdc433;margin:0;border-radius:0;flex:1;box-sizing:border-box}.placement-confirm-button:hover:not(:disabled){background:linear-gradient(135deg,#4ecdc44d,#4ecdc433);border-color:#4ecdc499;box-shadow:0 0 25px #4ecdc44d;transform:none}.placement-cancel-button{padding:.6rem 1.8rem;font-size:1rem;font-weight:700;background:linear-gradient(135deg,#ff6b6b33,#ff6b6b1a);border:2px solid rgba(255,107,107,.4);color:#ff6b6b;box-shadow:0 0 15px #ff6b6b33;margin:0;border-radius:0;flex:1;box-sizing:border-box}.placement-cancel-button:hover:not(:disabled){background:linear-gradient(135deg,#ff6b6b4d,#ff6b6b33);border-color:#ff6b6b99;box-shadow:0 0 25px #ff6b6b4d;transform:none}.board-with-controls{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:6px;max-height:100%;position:relative;overflow:visible}.inline-sidebar{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 4px;background:#ffffffeb;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:10px;border:1px solid rgba(20,184,166,.2);box-shadow:0 2px 12px #5d403714;flex-shrink:0}.inline-sidebar-left{order:-1}.inline-sidebar-right{order:1}.inline-sidebar-group{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;position:relative}.inline-sidebar-group:not(:last-child):after{content:"";display:block;width:60%;height:1px;background:#14b8a626;margin-top:4px}.inline-sidebar-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 4px;width:44px;min-height:44px;border:1px solid rgba(20,184,166,.25);border-radius:8px;font-size:10px;font-weight:600;cursor:pointer;transition:all .2s ease;background:#14b8a60f;color:#0d9488;font-family:YouYuan,幼圆,Microsoft YaHei,sans-serif;line-height:1.2}.inline-sidebar-btn svg{flex-shrink:0}.inline-sidebar-btn span{font-size:10px;white-space:nowrap}.inline-sidebar-btn:hover:not(:disabled){background:#14b8a626;border-color:#14b8a673;transform:scale(1.05);box-shadow:0 2px 8px #14b8a61f}.inline-sidebar-btn:active:not(:disabled){transform:scale(.98)}.inline-sidebar-btn:disabled{opacity:.35;cursor:not-allowed;background:#5d403708;border-color:#5d40371a;color:#5d403759}.inline-sidebar-btn.active{background:#14b8a62e;border-color:#14b8a680;box-shadow:0 0 10px #14b8a626}.inline-sidebar-btn-danger{border-color:#8d6e6340;background:#8d6e630f;color:#8d6e63}.inline-sidebar-btn-danger:hover:not(:disabled){background:#8d6e631f;border-color:#8d6e6366;box-shadow:0 2px 8px #8d6e631a}.inline-sidebar-btn-confirm{background:#14b8a61f;border-color:#14b8a659;color:#0d9488}.inline-sidebar-btn-confirm:hover:not(:disabled){background:#14b8a638;border-color:#14b8a680;box-shadow:0 2px 8px #14b8a61a}.inline-sidebar-btn-cancel{background:#8d6e630f;border-color:#8d6e6340;color:#8d6e63}.inline-sidebar-btn-cancel:hover:not(:disabled){background:#8d6e631f;border-color:#8d6e6366;box-shadow:0 2px 8px #8d6e6314}.inline-settings-flyout{position:absolute;right:calc(100% + 6px);left:auto;top:0;display:flex;flex-direction:column;gap:6px;padding:8px;background:#fffffffa;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:8px;border:1px solid rgba(20,184,166,.3);box-shadow:0 4px 20px #5d40371f;z-index:1000;min-width:0;white-space:nowrap;max-height:80vh;overflow-y:auto}.inline-settings-flyout select{padding:4px 8px;border:1px solid rgba(20,184,166,.25);border-radius:6px;font-size:12px;background:#14b8a60d;color:#0d9488;font-family:YouYuan,幼圆,Microsoft YaHei,sans-serif;cursor:pointer;outline:none;min-width:0}.inline-settings-flyout select:disabled{opacity:.4;cursor:not-allowed}.inline-settings-flyout select option{background:#fff;color:#0d9488}.inline-timer-label{display:flex;align-items:center;gap:6px;font-size:12px;color:#5d4037;cursor:pointer;font-family:YouYuan,幼圆,Microsoft YaHei,sans-serif;padding:2px 0}.inline-timer-label input[type=checkbox]{width:12px;height:12px;accent-color:#14B8A6;cursor:pointer}.inline-timer-config{display:flex;flex-direction:column;gap:4px;padding-top:4px;border-top:1px solid rgba(20,184,166,.15)}.inline-timer-config select{padding:3px 6px;border:1px solid rgba(20,184,166,.2);border-radius:6px;font-size:11px;background:#14b8a60d;color:#0d9488;font-family:YouYuan,幼圆,Microsoft YaHei,sans-serif;cursor:pointer;outline:none;min-width:0}.inline-flyout-btn{padding:4px 8px;border:1px solid rgba(20,184,166,.25);border-radius:6px;font-size:12px;background:#14b8a614;color:#0d9488;font-family:YouYuan,幼圆,Microsoft YaHei,sans-serif;cursor:pointer;transition:all .2s ease;min-width:0}.inline-flyout-btn:hover:not(:disabled){background:#14b8a626}.inline-flyout-btn:disabled{opacity:.4;cursor:not-allowed}.inline-player-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:4px 2px;width:40px;min-height:40px;border-radius:8px;background:#14b8a60a;border:1px solid rgba(20,184,166,.12);color:#5d4037;font-family:YouYuan,幼圆,Microsoft YaHei,sans-serif;transition:all .2s ease}.inline-player-stone{font-size:14px;line-height:1}.inline-player-name{font-size:10px;font-weight:600;line-height:1.2}.inline-status-indicator{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 2px;font-size:9px;font-family:YouYuan,幼圆,Microsoft YaHei,sans-serif;color:#5d4037}.inline-status-dot{display:block;width:8px;height:8px;border-radius:50%;flex-shrink:0}.inline-status-text{font-size:9px;white-space:nowrap}.inline-room-code{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 4px;width:44px;min-height:44px;border-radius:8px;background:#14b8a614;border:1px solid rgba(20,184,166,.25);cursor:pointer;transition:all .2s ease;font-family:YouYuan,幼圆,Microsoft YaHei,sans-serif}.inline-room-code:hover{background:#14b8a626;border-color:#14b8a673;transform:scale(1.05);box-shadow:0 2px 8px #14b8a61f}.inline-room-label{font-size:9px;color:#8d6e63;line-height:1}.inline-room-value{font-size:13px;font-weight:700;color:#0d9488;line-height:1.2}.inline-room-size{font-size:9px;color:#8d6e63;line-height:1}.inline-player-badge-full{width:auto;min-width:44px;max-width:80px;padding:6px 4px}.inline-player-badge-full .inline-player-name{font-size:10px;max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.inline-ready-badge{font-size:9px;font-weight:600;padding:1px 4px;border-radius:3px;background:#5d403714;color:#8d6e63;margin-top:2px}.inline-ready-badge.ready{background:#4caf5026;color:#4caf50}.inline-player-card{display:flex;flex-direction:column;gap:3px;padding:6px 4px;width:auto;min-width:44px;max-width:80px;border-radius:8px;background:#14b8a60a;border:1px solid rgba(20,184,166,.12);font-family:YouYuan,幼圆,Microsoft YaHei,sans-serif;transition:all .2s ease}.inline-player-card.current-turn{background:#14b8a61a;border-color:#14b8a64d;box-shadow:0 0 8px #14b8a61a}.inline-player-card-header{display:flex;align-items:center;justify-content:space-between;gap:2px}.inline-player-card-label{font-size:9px;color:#8d6e63;font-weight:600}.inline-turn-tag{font-size:8px;font-weight:700;padding:1px 3px;border-radius:3px;white-space:nowrap}.inline-opponent-tag{color:#ff6b6b;background:#ff6b6b26}.inline-self-tag{color:#0d9488;background:#14b8a626}.inline-player-card-body{display:flex;align-items:center;justify-content:center;gap:3px}.inline-player-card-stone{font-size:12px;line-height:1}.inline-player-card-name{font-size:10px;font-weight:600;color:#5d4037;max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.inline-player-card-captures{font-size:9px;color:#8d6e63;text-align:center}.inline-sidebar .agreement-status,.inline-sidebar .undo-status{width:100%}.inline-sidebar .agreement-button,.inline-sidebar .undo-button{width:44px;min-height:44px;padding:6px 4px;border-radius:8px;font-size:10px;font-weight:600;cursor:pointer;border:1px solid transparent;transition:all .2s;text-align:center;background:#14b8a614;border-color:#14b8a640;color:#0d9488;font-family:YouYuan,幼圆,Microsoft YaHei,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;line-height:1.2}.inline-sidebar .agreement-button:hover,.inline-sidebar .undo-button:hover{background:#14b8a626;border-color:#14b8a673;transform:scale(1.05)}.inline-sidebar .agreement-button.cancel,.inline-sidebar .undo-button.cancel{background:#ff6b6b14;border-color:#ff6b6b40;color:#ff6b6b}.inline-sidebar .agreement-button.cancel:hover,.inline-sidebar .undo-button.cancel:hover{background:#ff6b6b26;border-color:#ff6b6b66}.inline-sidebar .agreement-button.agree,.inline-sidebar .undo-button.agree{background:#4caf5014;border-color:#4caf5040;color:#4caf50}.inline-sidebar .agreement-button.agree:hover,.inline-sidebar .undo-button.agree:hover{background:#4caf5026;border-color:#4caf5066}.inline-sidebar .undo-button.reject{background:#8d6e6314;border-color:#8d6e6340;color:#8d6e63}.inline-sidebar .undo-button.reject:hover{background:#8d6e6326;border-color:#8d6e6366}.inline-sidebar .agreement-message,.inline-sidebar .undo-message{font-size:9px;color:#8d6e63;text-align:center;margin-bottom:4px;line-height:1.2}.inline-sidebar .agreement-waiting,.inline-sidebar .agreement-agreed,.inline-sidebar .agreement-game-over,.inline-sidebar .undo-waiting,.inline-sidebar .undo-agreed,.inline-sidebar .undo-completed,.inline-sidebar .undo-rejected,.inline-sidebar .undo-buttons{display:flex;flex-direction:column;gap:4px;align-items:center}@media(max-width:640px){.inline-sidebar .agreement-button,.inline-sidebar .undo-button{flex-direction:row;width:auto;min-height:32px;padding:4px 8px;font-size:11px;gap:4px}.inline-sidebar .agreement-message,.inline-sidebar .undo-message{font-size:10px}.inline-sidebar .agreement-waiting,.inline-sidebar .agreement-agreed,.inline-sidebar .agreement-game-over,.inline-sidebar .undo-waiting,.inline-sidebar .undo-agreed,.inline-sidebar .undo-completed,.inline-sidebar .undo-rejected{flex-direction:row;flex-wrap:wrap;justify-content:center}.inline-sidebar .undo-buttons{flex-direction:row;gap:4px}}.inline-connection-status{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 2px;font-size:9px;font-family:YouYuan,幼圆,Microsoft YaHei,sans-serif;color:#5d4037}.inline-connection-status.connected{color:#0d9488}.inline-connection-status.disconnected{color:#8d6e63}.inline-connection-dot{display:block;width:8px;height:8px;border-radius:50%;background:currentColor;flex-shrink:0}.inline-connection-text{font-size:9px;white-space:nowrap}.inline-sidebar-btn-ready{background:#14b8a61f;border-color:#14b8a659;color:#0d9488}.inline-sidebar-btn-ready:hover:not(:disabled){background:#14b8a638;border-color:#14b8a680}.inline-sidebar-btn-unready{background:#ffc1071f;border-color:#ffc10759;color:#ffc107}.inline-sidebar-btn-unready:hover:not(:disabled){background:#ffc10738;border-color:#ffc10780}.inline-ai-thinking{display:flex;align-items:center;justify-content:center;padding:4px 2px;font-size:9px;color:#0d9488;font-family:YouYuan,幼圆,Microsoft YaHei,sans-serif;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.inline-timer-display{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:6px 4px;width:44px;min-height:44px;border-radius:8px;background:#14b8a60f;border:1px solid rgba(20,184,166,.2);font-family:YouYuan,幼圆,Microsoft YaHei,sans-serif;transition:all .2s ease}.inline-timer-turn{font-size:12px;line-height:1}.inline-timer-value{font-size:14px;font-weight:700;line-height:1.2;color:#0d9488}.inline-timer-byoyomi{font-size:9px;color:#8d6e63;line-height:1}.inline-control-bar,.inline-placement-confirm{display:none}@media(max-width:640px){.board-with-controls{flex-direction:column;gap:4px}.inline-sidebar{flex-direction:row;justify-content:center;padding:4px 6px;min-height:auto;max-height:none;width:100%;max-width:500px;z-index:10}.inline-sidebar-left,.inline-sidebar-right{order:1}.inline-sidebar-group{flex-direction:row;width:auto}.inline-sidebar-group:not(:last-child):after{width:1px;height:60%;margin-top:0;margin-left:4px}.inline-sidebar-btn{flex-direction:row;gap:3px;padding:4px 8px;width:auto;min-height:32px}.inline-sidebar-btn span{font-size:11px}.inline-settings-flyout{right:auto;left:50%;top:auto;bottom:calc(100% + 6px);transform:translate(-50%);z-index:9999}.inline-player-badge[title^=AI]{display:none}.inline-status-indicator{flex-direction:row;padding:4px 8px}.inline-room-code{flex-direction:row;width:auto;min-height:32px;padding:4px 8px;gap:4px}.inline-room-label,.inline-room-size{font-size:10px}.inline-room-value{font-size:12px}.inline-player-card{flex-direction:row;align-items:center;gap:4px;padding:4px 6px;min-height:32px}.inline-player-card-header{flex-direction:row;gap:2px}.inline-player-card-body{gap:2px}.inline-player-card-name{font-size:11px;max-width:50px}.inline-player-card-captures{font-size:10px}.inline-turn-tag{font-size:9px;padding:1px 3px}.inline-connection-status{flex-direction:row;padding:4px 8px;gap:4px}.inline-connection-text{font-size:10px}}@media(max-width:375px){.inline-sidebar-btn{padding:2px 4px;font-size:8px;min-height:26px}.inline-sidebar-btn span{font-size:8px}.inline-sidebar{padding:2px 3px;gap:2px}.inline-sidebar svg{width:14px;height:14px}.inline-player-badge{padding:2px 4px;min-height:26px}.inline-player-stone{font-size:11px}.inline-player-name{font-size:8px}.inline-room-code{padding:2px 4px;min-height:26px;gap:1px}.inline-room-label,.inline-room-size{font-size:8px}.inline-room-value{font-size:10px}.inline-player-card{padding:2px 4px;min-height:26px;gap:2px}.inline-player-card-name{font-size:9px;max-width:40px}.inline-player-card-captures{font-size:8px}.inline-connection-status{padding:2px 4px;gap:2px}.inline-connection-text{font-size:8px}.inline-status-indicator{padding:2px 4px}.inline-status-text{font-size:8px}}.inline-timer-container{display:flex;align-items:center;justify-content:center;gap:12px;padding:6px 16px;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:10px;border:1px solid rgba(20,184,166,.2);box-shadow:0 2px 12px #5d403714;margin-bottom:6px;font-family:YouYuan,幼圆,Microsoft YaHei,sans-serif}.inline-timer-player{display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:8px;background:#5d40370a;border:1px solid transparent;transition:all .3s ease;min-width:100px;justify-content:center}.inline-timer-player.active{background:#14b8a61a;border-color:#14b8a659;box-shadow:0 0 8px #14b8a61a}.inline-timer-player.warning{animation:timer-warning-pulse 1s ease-in-out infinite}.inline-timer-player.warning .inline-timer-countdown{color:#e53935}@keyframes timer-warning-pulse{0%,to{border-color:#e539354d}50%{border-color:#e5393599}}.inline-timer-stone{font-size:16px;line-height:1}.inline-timer-name{font-size:12px;font-weight:600;color:#5d4037;white-space:nowrap}.inline-timer-countdown{font-size:16px;font-weight:700;color:#0d9488;font-variant-numeric:tabular-nums;min-width:36px;text-align:center}.inline-timer-byoyomi{font-size:10px;color:#8d6e63;background:#8d6e631a;padding:1px 5px;border-radius:4px;white-space:nowrap}.inline-timer-divider{width:1px;height:24px;background:#14b8a633}@media(max-width:480px){.inline-timer-container{gap:8px;padding:4px 10px}.inline-timer-player{min-width:80px;padding:3px 8px;gap:4px}.inline-timer-name{font-size:10px}.inline-timer-countdown{font-size:14px;min-width:30px}.inline-timer-stone{font-size:14px}}.auth-page-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:100vh;padding:16px 20px;background:linear-gradient(135deg,var(--color-background) 0%,#EDE7DC 100%);box-sizing:border-box;overflow:hidden;transform:translateY(-30px)}.login-section{display:flex;flex-direction:column;flex:1;min-height:0}.login-section .auth-page-container{height:100%!important;min-height:unset!important;transform:none}.auth-page-title-section{text-align:center;margin-bottom:8px;flex-shrink:0}.auth-page-title{font-family:var(--font-family-header);font-size:1.6rem;font-weight:600;color:var(--color-primary);margin:0;letter-spacing:2px}.auth-illustration{width:120px;height:120px;margin-bottom:8px;animation:float 3s ease-in-out infinite;flex-shrink:0}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.auth-illustration-img{width:100%;height:100%;-o-object-fit:contain;object-fit:contain;border-radius:24px}.auth-form-section{width:100%;max-width:360px;display:flex;flex-direction:column;gap:18px;flex-shrink:0}.auth-input-group{width:100%}.auth-input-wrapper{display:flex;align-items:center;background:#fff;border:2px solid #8D6E63;border-radius:10px;overflow:hidden;transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease;box-shadow:0 2px 8px #8d6e6326}.auth-input-wrapper:focus-within{border-color:#6d4c41;box-shadow:0 0 0 3px #8d6e6326}.auth-input-icon{padding:0 10px;font-size:1rem;color:#8d6e63}.auth-input-field{flex:1;padding:12px 10px;border:none;outline:none;font-size:.95rem;font-family:var(--font-family-base);color:#2e7d32;background:transparent}.auth-input-field::-moz-placeholder{color:#81c784}.auth-input-field::placeholder{color:#81c784}.auth-password-toggle{padding:10px;border:none;background:transparent;cursor:pointer;font-size:1rem;transition:transform .2s ease}.auth-password-toggle:hover{transform:scale(1.1)}.auth-primary-btn{width:100%;padding:12px;font-size:1rem;font-weight:700;font-family:var(--font-family-base);color:#fff;background:#4caf50;border:2px solid #388e3c;border-radius:10px;cursor:pointer;transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease;letter-spacing:1px;margin-top:25px;box-shadow:0 2px 8px #4caf5059}.auth-primary-btn:hover:not(:disabled){background:#388e3c;transform:translateY(-1px);box-shadow:0 4px 12px #388e3c73}.auth-primary-btn:disabled{opacity:.6;cursor:not-allowed}.auth-divider-section{display:flex;align-items:center;gap:10px;margin:4px 0}.auth-divider-line{flex:1;height:1px;background:var(--color-border)}.auth-divider-text{color:var(--color-text-light);font-size:.85rem}.auth-wechat-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;font-size:.95rem;font-weight:700;font-family:var(--font-family-base);color:#07c160;background:#e8f5e9;border:2px solid #07C160;border-radius:10px;cursor:pointer;transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease;box-shadow:0 2px 8px #07c16026}.auth-wechat-btn:hover:not(:disabled){background:#07c160;color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px #07c16059}.auth-wechat-btn:disabled{opacity:.6;cursor:not-allowed}.auth-wechat-icon{font-size:1.1rem}.auth-error{padding:8px 10px;background:#ffebee;border:1px solid #FFCDD2;border-radius:8px;color:#c62828;font-size:.8rem;text-align:center;min-height:18px}.wechat-qr-container{background:#fff;border-radius:12px;padding:16px;box-shadow:0 3px 16px #0000001a}.wechat-qr-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.wechat-qr-header h3{margin:0;font-size:1rem;color:var(--color-primary)}.cancel-wechat-login-button{padding:6px 12px;font-size:.8rem;background:transparent;border:1px solid var(--color-border);border-radius:6px;cursor:pointer}.wechat-qr-content{display:flex;flex-direction:column;align-items:center;gap:10px}.wx-login-iframe{width:240px;height:260px}.wechat-qr-tips{color:var(--color-text-light);font-size:.8rem}.auth-user-info{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px}.auth-header{width:100%;display:flex;justify-content:flex-end}.auth-button{padding:8px 16px;font-size:.85rem;font-family:var(--font-family-base);background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;cursor:pointer;transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease}.auth-button:hover{background:var(--color-primary);color:var(--color-light);border-color:var(--color-primary)}.user-info{text-align:center}.user-email{font-size:1rem;color:var(--color-text)}.logout-button{background:#ffebee;border-color:#ffcdd2;color:#c62828}.logout-button:hover{background:#c62828;border-color:#c62828;color:#fff}@media(max-height:700px){.auth-page-container{padding:10px 16px;justify-content:center;overflow:hidden}.auth-illustration{width:90px;height:90px}.auth-form-section{gap:12px}.auth-input-field{padding:10px 8px;font-size:.9rem}.auth-primary-btn,.auth-wechat-btn{padding:10px;font-size:.9rem}.auth-primary-btn{margin-top:6px}.auth-page-title{font-size:1.4rem}}@media(max-width:480px){.auth-page-container{padding:12px 16px;justify-content:center;overflow:hidden}.auth-page-title{font-size:1.4rem}.auth-illustration{width:100px;height:100px}.auth-form-section{max-width:100%;gap:14px}.auth-input-field{padding:12px 10px;font-size:.95rem}.auth-primary-btn{padding:12px;font-size:1rem;margin-top:6px}.auth-wechat-btn{padding:12px;font-size:.95rem}}.ranking-overlay{position:fixed;inset:0;background-color:#000c;display:flex;justify-content:center;align-items:center;z-index:var(--z-modal)}.ranking-modal{background-color:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;width:90%;max-width:500px;max-height:80vh;display:flex;flex-direction:column}.ranking-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #e8e8e8}.ranking-filter{padding:12px 20px;border-bottom:1px solid #e8e8e8;background-color:#fafafa}.board-size-tabs{display:flex;gap:8px;justify-content:center}.board-size-tab{padding:8px 16px;border:1px solid #d9d9d9;background-color:#fff;border-radius:4px;cursor:pointer;font-size:14px;font-weight:500;color:#666;transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease}.board-size-tab:hover{border-color:#1890ff;color:#1890ff}.board-size-tab.active{background-color:#1890ff;border-color:#1890ff;color:#fff}.ranking-header h3{margin:0;font-size:18px;font-weight:600;color:#333}.ranking-close-btn{background:none;border:none;font-size:24px;cursor:pointer;color:#666;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease}.ranking-close-btn:hover{color:#333;background-color:#f5f5f5}.ranking-content{padding:20px;overflow-y:auto;flex:1;display:flex;flex-direction:column;max-height:400px}.ranking-table{width:100%;border-collapse:collapse;flex:1;overflow-y:auto}.ranking-table th,.ranking-table td{padding:12px;text-align:center;border-bottom:1px solid #e8e8e8}.ranking-table th{background-color:#f5f5f5;font-weight:600;color:#333;position:sticky;top:0;z-index:1}.ranking-table tr:hover{background-color:#fafafa}.ranking-rank{font-weight:600;width:10%}.ranking-username{width:25%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ranking-title{width:15%;font-weight:500;color:#666}.ranking-wins,.ranking-total-games{width:10%;font-weight:500}.ranking-win-rate{width:15%;font-weight:500;color:#333}.ranking-loading,.ranking-error,.ranking-empty{display:flex;justify-content:center;align-items:center;height:200px;font-size:16px;color:#666}.ranking-error{color:#ff4d4f}.ranking-content::-webkit-scrollbar{width:8px}.ranking-content::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.ranking-content::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}.ranking-content::-webkit-scrollbar-thumb:hover{background:#a8a8a8}@media(max-width:768px){.ranking-modal{width:95%;max-height:90vh}.ranking-header{padding:12px 16px}.ranking-header h3{font-size:16px}.ranking-content{padding:16px}.ranking-table th,.ranking-table td{padding:10px;font-size:14px}}@media(max-width:480px){.ranking-modal{width:98%;max-height:95vh;border-radius:6px}.ranking-header{padding:10px 12px}.ranking-header h3{font-size:14px}.ranking-close-btn{font-size:20px;width:28px;height:28px}.ranking-filter{padding:8px 12px}.board-size-tab{padding:6px 10px;font-size:12px}.ranking-content{padding:10px;max-height:350px}.ranking-table th:nth-child(3),.ranking-table td:nth-child(3){display:none}.ranking-table th,.ranking-table td{padding:8px 6px;font-size:12px}.ranking-rank{width:15%}.ranking-username{width:35%}.ranking-win-rate{width:20%}.ranking-loading,.ranking-error,.ranking-empty{height:150px;font-size:14px}}.match-modal-overlay{position:fixed;inset:0;background-color:#0009;display:flex;justify-content:center;align-items:center;z-index:var(--z-modal);animation:fadeIn .3s ease}.match-modal-content{background:linear-gradient(135deg,#fff,#f8f9fa);border-radius:20px;padding:30px;width:90%;max-width:400px;position:relative;box-shadow:0 20px 60px #0000004d;animation:slideUp .3s ease}@keyframes slideUp{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}.match-modal-close{position:absolute;top:15px;right:15px;width:32px;height:32px;border:none;background:#f0f0f0;border-radius:50%;font-size:20px;color:#666;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .2s ease,opacity .2s ease,background-color .2s ease,color .2s ease,box-shadow .2s ease,border-color .2s ease}.match-modal-close:hover{background:#e0e0e0;color:#333}.match-modal-header{text-align:center;margin-bottom:25px}.match-modal-header h2{margin:0 0 10px;font-size:24px;color:#333;font-weight:600}.match-modal-header p{margin:0;color:#666;font-size:14px}.match-modal-header.matching{margin-bottom:30px}.matching-spinner{font-size:48px;margin-bottom:15px;animation:spin 2s linear infinite}.board-size-options{display:flex;flex-direction:column;gap:12px;margin-bottom:25px}.board-size-option{display:flex;align-items:center;padding:16px 20px;background:#fff;border:2px solid #e0e0e0;border-radius:12px;cursor:pointer;transition:transform .2s ease,opacity .2s ease,background-color .2s ease,color .2s ease,box-shadow .2s ease,border-color .2s ease;position:relative}.board-size-option:hover{border-color:#007bff;transform:translate(5px)}.board-size-option.selected{border-color:#007bff;background:linear-gradient(135deg,#f0f7ff,#e3f2fd)}.board-size-label{font-size:20px;font-weight:700;color:#333;min-width:70px}.board-size-desc{font-size:14px;color:#666;flex:1;margin-left:15px}.selected-indicator{width:28px;height:28px;background:#007bff;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}.match-modal-actions{display:flex;gap:12px}.match-modal-actions button{flex:1;padding:14px 20px;border:none;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;transition:transform .2s ease,opacity .2s ease,background-color .2s ease,color .2s ease,box-shadow .2s ease,border-color .2s ease}.cancel-btn{background:#f0f0f0;color:#666}.cancel-btn:hover{background:#e0e0e0}.start-match-btn{background:linear-gradient(135deg,#007bff,#0056b3);color:#fff;box-shadow:0 4px 15px #007bff4d}.start-match-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #007bff66}.cancel-match-btn{background:linear-gradient(135deg,#dc3545,#c82333);color:#fff;box-shadow:0 4px 15px #dc35454d}.cancel-match-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #dc354566}.matching-animation{position:relative;width:100px;height:100px;margin:0 auto 30px;display:flex;align-items:center;justify-content:center}.pulse-ring{position:absolute;width:100%;height:100%;border-radius:50%;background:#007bff1a;animation:pulse 2s ease-out infinite}.pulse-ring.delay-1{animation-delay:.5s}.pulse-ring.delay-2{animation-delay:1s}@keyframes pulse{0%{transform:scale(.5);opacity:1}to{transform:scale(1.5);opacity:0}}@media(max-width:480px){.match-modal-content{padding:20px;margin:20px}.match-modal-header h2{font-size:20px}.board-size-option{padding:12px 16px}.board-size-label{font-size:18px;min-width:60px}.match-modal-actions button{padding:12px 16px;font-size:15px}}.settings-page-container{display:flex;flex-direction:column;min-height:100vh;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);font-family:YouYuan,幼圆,Microsoft YaHei,sans-serif}.settings-page-header{display:flex;align-items:center;padding:1.5rem 1.2rem;background:#fff;box-shadow:0 4px 20px #00000014;border-radius:0 0 30px 30px;margin-bottom:1.5rem;position:relative;overflow:hidden}.settings-page-header:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#4facfe,#00f2fe)}.settings-page-header h2{margin:0;color:#2c3e50;font-size:1.4rem;font-weight:700;flex:1;text-align:center;letter-spacing:.5px}.settings-back-btn{background:linear-gradient(135deg,#f0f4f8,#e9ecef);border:none;font-size:1.5rem;color:#495057;cursor:pointer;padding:.75rem 1rem;border-radius:16px;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1),background-color .3s cubic-bezier(.4,0,.2,1),color .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1),border-color .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #00000014;position:relative;z-index:1}.settings-back-btn:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#e9ecef,#dee2e6);border-radius:16px;opacity:0;transition:opacity .3s ease;z-index:-1}.settings-back-btn:hover{transform:translate(-4px) scale(1.05);box-shadow:0 4px 12px #0000001f}.settings-back-btn:hover:before{opacity:1}.settings-back-btn:active{transform:translate(-2px) scale(.98);box-shadow:0 1px 4px #0000001a}.settings-page-content{flex:1;padding:0 1.2rem;display:flex;justify-content:center;align-items:flex-start}.settings-page-modal{background:#fff;border-radius:24px;width:100%;max-width:850px;max-height:calc(100vh - 200px);overflow:hidden;box-shadow:0 12px 48px #00000026;display:flex;flex-direction:column;transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .4s cubic-bezier(.4,0,.2,1),background-color .4s cubic-bezier(.4,0,.2,1),color .4s cubic-bezier(.4,0,.2,1),box-shadow .4s cubic-bezier(.4,0,.2,1),border-color .4s cubic-bezier(.4,0,.2,1);position:relative;animation:fadeInUp .6s cubic-bezier(.4,0,.2,1) forwards}.settings-page-modal:before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,#4facfe,#00f2fe)}.settings-page-section{padding:1.5rem;overflow-y:auto}.settings-page-section h3{margin:0 0 1rem;color:#2c3e50;font-size:1.1rem;font-weight:600}.setting-item{display:flex;align-items:center;justify-content:space-between;padding:1rem 0;border-bottom:1px solid #f0f0f0;transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease;cursor:pointer}.setting-item:last-child{border-bottom:none}.setting-item:hover{background-color:#fafbfc;padding-left:.5rem;border-radius:8px}.setting-item.expandable{cursor:pointer}.setting-info{display:flex;align-items:center;gap:1rem}.setting-icon{font-size:1.5rem}.setting-details{display:flex;flex-direction:column;gap:.25rem}.setting-name{font-size:1rem;font-weight:500;color:#333}.setting-description{font-size:.85rem;color:#666}.setting-arrow-container{display:flex;align-items:center;gap:.5rem}.color-preview-small{width:20px;height:20px;border-radius:50%;border:2px solid #ddd;box-shadow:0 1px 3px #0003}.expand-arrow{font-size:.8rem;color:#666;transition:transform .3s ease;margin-left:.5rem}.expand-arrow.expanded{transform:rotate(180deg)}.color-settings-expanded{padding:1rem;background-color:#f8f9fa;border-radius:12px;margin-top:.5rem;animation:slideDown .3s ease}@keyframes slideDown{0%{opacity:0;max-height:0}to{opacity:1;max-height:500px}}.color-setting-subitem{margin-bottom:1rem}.color-setting-subitem:last-child{margin-bottom:0}.color-setting-label{font-size:.9rem;font-weight:500;color:#666;margin-bottom:.5rem}.color-picker-row{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}.color-input-small{width:40px;height:32px;border:none;border-radius:6px;cursor:pointer;padding:0;background:none}.color-input-small::-webkit-color-swatch-wrapper{padding:0}.color-input-small::-webkit-color-swatch{border:2px solid #ddd;border-radius:6px}.color-value-small{font-size:.8rem;color:#333;font-family:monospace;background-color:#fff;padding:.2rem .4rem;border-radius:4px;border:1px solid #ddd}.color-presets-small{display:flex;flex-wrap:wrap;gap:.4rem}.color-preset-btn-small{width:22px;height:22px;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 3px #0003;cursor:pointer;transition:transform .2s ease,opacity .2s ease,background-color .2s ease,color .2s ease,box-shadow .2s ease,border-color .2s ease;padding:0}.color-preset-btn-small:hover{transform:scale(1.1);box-shadow:0 2px 4px #0000004d}.color-preset-btn-small:active{transform:scale(.95)}.preview-section-small{display:flex;justify-content:center;margin:1rem 0;padding:.5rem;background-color:#fff;border-radius:8px}.color-actions-small{display:flex;gap:.75rem;margin-top:1rem}.reset-btn-small,.save-btn-small{flex:1;padding:.6rem .8rem;border:none;border-radius:6px;font-size:.9rem;font-weight:500;cursor:pointer;transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease}.reset-btn-small{background-color:#e0e0e0;color:#666}.reset-btn-small:hover{background-color:#d0d0d0}.reset-btn-small:disabled{opacity:.6;cursor:not-allowed}.save-btn-small{background-color:#3498db;color:#fff}.save-btn-small:hover{background-color:#2980b9}.save-btn-small:disabled{opacity:.6;cursor:not-allowed}.save-message-small{margin-top:.75rem;padding:.5rem;border-radius:6px;text-align:center;font-size:.85rem;animation:fadeIn .3s ease}.save-message-small.success{background-color:#d4edda;color:#155724}.save-message-small.error{background-color:#f8d7da;color:#721c24}.toggle-switch{position:relative;display:inline-block;width:56px;height:30px}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;inset:0;background-color:#e0e0e0;transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease;border-radius:30px;box-shadow:inset 0 2px 4px #0000001a}.toggle-slider:before{position:absolute;content:"";height:24px;width:24px;left:3px;bottom:3px;background-color:#fff;transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease;border-radius:50%;box-shadow:0 2px 4px #0003}input:checked+.toggle-slider{background-color:#3498db;box-shadow:inset 0 2px 4px #0003}input:checked+.toggle-slider:before{transform:translate(26px);box-shadow:0 2px 6px #0000004d}@media(max-width:768px){.settings-page-header{padding:1.2rem 1rem;border-radius:0 0 24px 24px}.settings-page-header h2{font-size:1.2rem}.settings-back-btn{font-size:1.3rem;padding:.6rem .8rem;border-radius:14px}.settings-page-content{padding:0 1rem}.settings-page-modal{border-radius:20px;max-height:calc(100vh - 180px)}.settings-page-section{padding:1.2rem}.color-presets-small{gap:.3rem}.color-preset-btn-small{width:20px;height:20px}}@media(hover:none)and (pointer:coarse){.settings-back-btn:active{transform:translate(-2px) scale(.95)}.color-preset-btn-small:active{transform:scale(.9)}.setting-item:active{background-color:#f0f0f0}}.privacy-modal-overlay{position:fixed;inset:0;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:var(--z-max);padding:16px}.privacy-modal-container{background-color:#fff;border-radius:12px;width:100%;max-width:500px;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 4px 20px #0000004d}.privacy-modal-header{padding:20px 24px;border-bottom:1px solid #e0e0e0;text-align:center}.privacy-modal-header h2{margin:0;font-size:20px;font-weight:600;color:#333}.privacy-modal-content{flex:1;overflow:hidden;padding:0}.privacy-content-scrollable{padding:20px 24px;overflow-y:auto;max-height:50vh;line-height:1.6}.privacy-content-scrollable h3{font-size:16px;font-weight:600;color:#333;margin:0 0 12px}.privacy-content-scrollable h4{font-size:14px;font-weight:600;color:#444;margin:16px 0 8px}.privacy-content-scrollable p{font-size:14px;color:#666;margin:8px 0}.privacy-content-scrollable ul{margin:8px 0;padding-left:20px}.privacy-content-scrollable li{font-size:14px;color:#666;margin:4px 0}.privacy-content-scrollable strong{color:#444;font-weight:600}.privacy-full-policy-link{margin:16px 0;padding:12px;background-color:#e3f2fd;border-radius:8px;text-align:center;font-size:14px;color:#333}.privacy-full-policy-link a{color:#1976d2;text-decoration:underline;font-weight:500}.privacy-full-policy-link a:hover{color:#1565c0}.privacy-agreement-text{margin-top:20px!important;padding:12px;background-color:#f5f5f5;border-radius:8px;text-align:center;font-weight:500;color:#333!important}.privacy-modal-footer{padding:16px 24px;border-top:1px solid #e0e0e0;display:flex;gap:12px;justify-content:flex-end}.privacy-btn{padding:12px 24px;border:none;border-radius:8px;font-size:15px;font-weight:500;cursor:pointer;transition:transform .2s ease,opacity .2s ease,background-color .2s ease,color .2s ease,box-shadow .2s ease,border-color .2s ease}.privacy-btn-agree{background-color:#4caf50;color:#fff;flex:1}.privacy-btn-agree:hover{background-color:#45a049}.privacy-btn-agree:active{transform:scale(.98)}.privacy-btn-disagree{background-color:#f5f5f5;color:#666}.privacy-btn-disagree:hover{background-color:#e0e0e0}.privacy-btn-secondary{background-color:#f5f5f5;color:#666;flex:1}.privacy-btn-secondary:hover{background-color:#e0e0e0}.privacy-btn-exit{background-color:#ff5252;color:#fff;flex:1}.privacy-btn-exit:hover{background-color:#ff1744}.privacy-confirm-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:var(--z-max)}.privacy-confirm-modal{background-color:#fff;border-radius:12px;padding:24px;width:90%;max-width:320px;text-align:center;box-shadow:0 4px 20px #0000004d}.privacy-confirm-modal h3{margin:0 0 12px;font-size:18px;font-weight:600;color:#333}.privacy-confirm-modal p{margin:0 0 20px;font-size:14px;color:#666;line-height:1.5}.privacy-confirm-buttons{display:flex;gap:12px}.dark-mode .privacy-modal-container,.dark-mode .privacy-confirm-modal{background-color:#2d2d2d}.dark-mode .privacy-modal-header{border-bottom-color:#444}.dark-mode .privacy-modal-header h2,.dark-mode .privacy-content-scrollable h3,.dark-mode .privacy-content-scrollable h4{color:#fff}.dark-mode .privacy-content-scrollable p,.dark-mode .privacy-content-scrollable li{color:#ccc}.dark-mode .privacy-content-scrollable strong{color:#fff}.dark-mode .privacy-full-policy-link{background-color:#1e3a5f;color:#fff}.dark-mode .privacy-full-policy-link a{color:#64b5f6}.dark-mode .privacy-full-policy-link a:hover{color:#90caf9}.dark-mode .privacy-agreement-text{background-color:#3d3d3d;color:#fff!important}.dark-mode .privacy-modal-footer{border-top-color:#444}.dark-mode .privacy-btn-disagree,.dark-mode .privacy-btn-secondary{background-color:#444;color:#ccc}.dark-mode .privacy-btn-disagree:hover,.dark-mode .privacy-btn-secondary:hover{background-color:#555}.dark-mode .privacy-confirm-modal h3{color:#fff}.dark-mode .privacy-confirm-modal p{color:#ccc}@media(max-width:480px){.privacy-modal-container{max-height:90vh}.privacy-content-scrollable{max-height:55vh;padding:16px 20px}.privacy-modal-header{padding:16px 20px}.privacy-modal-footer{padding:12px 20px}.privacy-btn{padding:14px 20px;font-size:16px}}.teaching-platform{min-height:100vh;background:linear-gradient(135deg,#f0fdfa,#ccfbf1,#99f6e4);display:flex;flex-direction:column;align-items:center;padding:20px;color:#134e4a;position:relative}.platform-header{width:100%;max-width:800px;margin-bottom:30px;position:relative;display:flex;align-items:center;justify-content:center}.platform-title{font-size:2.5rem;color:var(--fg);margin:0;font-weight:700}.back-to-home-btn{position:absolute;left:0;display:inline-flex;align-items:center;gap:8px;padding:10px 20px;background:linear-gradient(135deg,#14b8a6,#0d9488);color:#fff;border:2px solid rgba(255,255,255,.5);border-radius:25px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 15px #14b8a64d}.back-to-home-btn:hover{background:linear-gradient(135deg,#2dd4bf,#14b8a6);border-color:#fffc;transform:translateY(-2px);box-shadow:0 6px 25px #14b8a666}.back-to-home-btn svg{width:20px;height:20px}.platform-nav{display:flex;gap:15px;margin-bottom:30px}.platform-nav-item{padding:12px 30px;border:1px solid color-mix(in srgb,var(--border) 8%,white 92%);border-radius:25px;background:transparent;color:var(--fg);font-size:16px;font-weight:600;cursor:pointer;transition:all .18s ease}.platform-nav-item:hover{background:color-mix(in srgb,var(--accent) 10%,white 90%);transform:translateY(-2px)}.platform-nav-item{padding:12px 30px;border:2px solid rgba(20,184,166,.2);border-radius:25px;background:#ffffffb3;color:#134e4a;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.platform-nav-item:hover{background:#14b8a61a;border-color:#14b8a666;transform:translateY(-2px)}.platform-nav-item.active{background:linear-gradient(135deg,#14b8a6,#0d9488);color:#fff;border-color:transparent;box-shadow:0 6px 20px #14b8a64d}.platform-main{width:100%;max-width:1000px;background:var(--surface);border-radius:12px;padding:24px;box-shadow:0 8px 24px #0000000f;min-height:400px}.content-section{animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.content-title{font-size:1.8rem;color:#333;margin:0 0 20px}.practice-buttons,.review-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}.practice-btn,.review-btn{padding:20px;border:none;border-radius:15px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease}.practice-btn{background:linear-gradient(135deg,#14b8a6,#0d9488);color:#fff;border:none;border-radius:16px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #14b8a64d;position:relative;overflow:hidden}.practice-btn:hover{transform:translateY(-3px);box-shadow:0 8px 25px #14b8a666}.practice-btn.ai-training-btn{background:linear-gradient(135deg,#f59e0b,#d97706)}.practice-btn.ai-training-btn:hover{box-shadow:0 8px 20px #f59e0b66}.review-btn.history{background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff}.review-btn.history:hover{transform:translateY(-3px);box-shadow:0 5px 15px #f5576c66}.review-btn.import{background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff}.review-btn.import:hover{transform:translateY(-3px);box-shadow:0 5px 15px #4facfe66}.course-list,.homework-list{display:flex;flex-direction:column;gap:15px}.course-item,.homework-item{display:flex;align-items:center;gap:15px;padding:20px;background:var(--surface);border-radius:12px;cursor:pointer;transition:all .22s ease;border:1px solid color-mix(in srgb,var(--border) 6%,white 94%)}.course-item:hover,.homework-item:hover{background:color-mix(in srgb,var(--accent) 6%,var(--surface) 94%);transform:translate(5px)}.course-icon{font-size:2rem}.course-info{flex:1}.course-info h3{margin:0 0 5px;font-size:1.1rem;color:#333}.course-info p{margin:5px 0 0;font-size:.85rem;color:#999}.course-arrow{font-size:1.5rem;color:#667eea}.homework-deadline{margin:5px 0;font-size:.85rem;color:#999}.homework-status{display:inline-block;padding:5px 12px;border-radius:20px;font-size:.8rem;font-weight:600;margin-bottom:10px}.homework-status.pending{background:#fff3cd;color:#856404}.homework-status.submitted{background:#d4edda;color:#155724}.homework-submit-btn{padding:8px 20px;background:#667eea;color:#fff;border:none;border-radius:8px;font-size:14px;cursor:pointer;transition:all .3s ease}.homework-submit-btn:hover{background:#5a6fd8}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:#fff;padding:30px;border-radius:20px;max-width:600px;width:90%;max-height:80vh;overflow-y:auto;position:relative}.game-list-modal{max-width:550px}.game-list{display:flex;flex-direction:column;gap:8px;padding:10px 0}.game-list-item{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:#f8f9fa;border-radius:10px;cursor:pointer;transition:all .18s ease;border:1px solid transparent}.game-list-item:hover{background:color-mix(in srgb,var(--accent) 8%,#f8f9fa 92%);border-color:color-mix(in srgb,var(--accent) 20%,transparent 80%);transform:translate(4px)}.game-list-info{flex:1;min-width:0}.game-list-title{font-size:1rem;font-weight:600;color:#333;display:flex;align-items:center;gap:8px}.game-list-color{font-size:.85rem}.game-list-color.black{color:#1a1a1a}.game-list-color.white{color:#999}.game-list-meta{font-size:.8rem;color:#888;margin-top:4px;display:flex;align-items:center;gap:4px}.meta-sep{color:#ccc}.game-list-arrow{font-size:1.2rem;color:#bbb;margin-left:12px;flex-shrink:0}.loading-spinner{width:40px;height:40px;border:3px solid #e0e0e0;border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}.close-modal-btn{position:absolute;top:15px;right:15px;background:none;border:none;font-size:1.5rem;cursor:pointer;color:#666;transition:color .3s ease}.close-modal-btn:hover{color:#333}.live-player{background:#000;border-radius:12px;overflow:hidden;margin-bottom:20px}.player-placeholder{height:300px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.2rem}.player-controls{display:flex;align-items:center;gap:10px;padding:15px;background:#1a1a1a}.player-controls button{background:none;border:none;color:#fff;font-size:1.2rem;cursor:pointer;padding:5px}.progress-bar{flex:1;height:5px;background:#333;border-radius:3px;overflow:hidden}.progress-fill{height:100%;background:#667eea;border-radius:3px;transition:width .3s ease}.course-info-bar{padding:15px;border-bottom:1px solid #eee}.course-info-bar h3{margin:0 0 5px;font-size:1.1rem}.course-info-bar p{margin:0;font-size:.9rem;color:#666}.chat-area{padding:15px;max-height:200px;overflow-y:auto}.chat-message{margin-bottom:10px;font-size:.9rem}.chat-user{font-weight:600;color:#667eea}.chat-text{color:#333}.review-content{display:grid;grid-template-columns:1fr 1fr;gap:20px}.review-board{height:300px;background:#f8f9fa;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#666}.review-history h3{margin:0 0 15px;font-size:1.1rem}.history-list{display:flex;flex-direction:column;gap:8px}.history-item{padding:10px;background:#f8f9fa;border-radius:8px;font-size:.9rem}.drop-zone{border:2px dashed color-mix(in srgb,var(--accent) 30%,white 70%);border-radius:12px;padding:40px;text-align:center;margin-bottom:20px;cursor:pointer;transition:all .22s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-moz-user-select:none;user-select:none;-webkit-user-select:none}.drop-zone:hover{background:#f8f9fa}.drop-zone:active{background:#e8f5e9;transform:scale(.98)}.drop-zone p{margin:0 0 15px;color:#666}.file-input{display:none}@media(max-width:768px){.teaching-platform{padding:12px}.platform-header{margin-bottom:20px}.platform-title{font-size:1.4rem}.back-to-home-btn{padding:6px 12px;font-size:12px;gap:4px}.back-to-home-btn svg{width:16px;height:16px}.platform-nav{flex-wrap:wrap;justify-content:center;margin-bottom:20px;gap:8px}.platform-nav-item{padding:8px 16px;font-size:13px}.practice-buttons,.review-buttons,.review-content{grid-template-columns:1fr}}.management-entry{display:flex;align-items:center;gap:20px;padding:25px;background:linear-gradient(135deg,#14b8a6,#0d9488);border-radius:16px;cursor:pointer;transition:all .3s ease;color:#fff;box-shadow:0 4px 15px #14b8a64d}.management-entry:hover{transform:translateY(-3px);box-shadow:0 8px 30px #14b8a666}.management-icon{font-size:3rem}.management-info{flex:1}.management-info h3{margin:0 0 8px;font-size:1.3rem;color:#fff}.management-info p{margin:0;font-size:.95rem;color:#ffffffd9}.management-arrow{font-size:1.8rem;color:#fffc}.course-category{margin-bottom:50px}.course-category h2{font-size:1.8rem;color:#333;margin:0 0 10px;display:flex;align-items:center;gap:12px}.category-desc{color:#666;font-size:1rem;margin:0 0 25px}.course-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}.course-item-card{background:#fff;border-radius:16px;padding:25px;display:flex;align-items:flex-start;gap:18px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #00000014;border:2px solid transparent;position:relative}.course-item-card:hover:not(.locked){transform:translateY(-5px);box-shadow:0 12px 35px #667eea33;border-color:#667eea}.course-item-card.locked{opacity:.75;cursor:not-allowed;background:linear-gradient(135deg,#fafafa,#f0f0f0)}.item-icon{width:60px;height:60px;border-radius:14px;background:linear-gradient(135deg,#14b8a6,#0d9488);display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0}.item-content{flex:1;min-width:0}.item-content h3{margin:0 0 8px;font-size:1.2rem;color:#333;font-weight:700}.item-content p{margin:0 0 12px;font-size:14px;color:#666;line-height:1.5}.item-meta{display:flex;gap:8px;flex-wrap:wrap}.meta-tag{padding:4px 12px;border-radius:12px;font-size:12px;font-weight:600;background:#f0f0f0;color:#666}.meta-tag.free{background:linear-gradient(135deg,#d4edda,#c3e6cb);color:#155724}.meta-tag.premium{background:linear-gradient(135deg,#fff3cd,#ffe69c);color:#856404}.item-arrow{font-size:24px;color:var(--accent);align-self:center;transition:transform .22s ease}.course-item-card:hover:not(.locked) .item-arrow{transform:translate(5px)}.item-lock{position:absolute;top:50%;right:20px;transform:translateY(-50%);font-size:28px;opacity:.6}.class-course-empty{min-height:500px;display:flex;align-items:center;justify-content:center}.empty-illustration{text-align:center;max-width:650px;padding:60px 40px;background:#fff;border-radius:20px;box-shadow:0 10px 40px #0000001a}.empty-icon-large{font-size:80px;margin-bottom:25px}.empty-illustration h2{font-size:1.8rem;color:#333;margin:0 0 20px}.empty-illustration p{font-size:1rem;color:#666;line-height:1.7;margin:0 0 30px;text-align:left}.action-btn{padding:14px 32px;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;margin:0 10px}.primary-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.primary-btn:hover{transform:translateY(-3px);box-shadow:0 8px 25px #667eea66}.secondary-btn{background:#fff;color:#667eea;border:2px solid #667eea}.secondary-btn:hover{background:#667eea;color:#fff}.homework-empty,.review-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px;text-align:center}.homework-empty .empty-icon,.review-empty .empty-icon{font-size:64px;margin-bottom:20px;opacity:.6}.homework-empty p,.review-empty p{font-size:1.2rem;color:#999;margin:0 0 10px}.homework-empty .empty-hint,.review-empty .empty-hint{font-size:14px;color:#bbb}.online-users-button-wrapper{position:relative;display:inline-block}.toolbar-btn.online-users-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:linear-gradient(180deg,#f8d878,#e8c048 40%,#d8b038);border:2px solid #b89838;border-radius:8px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 4px #00000026,inset 0 1px #ffffff80;padding:0}.toolbar-btn.online-users-btn:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0003,inset 0 1px #ffffff80;background:linear-gradient(180deg,#fce888,#f0d058 40%,#e0c048);border-color:#a88028}.toolbar-btn.online-users-btn:active{transform:translateY(0);box-shadow:0 1px 2px #00000026,inset 0 1px 2px #0000001a}.toolbar-btn.online-users-btn.active{background:linear-gradient(180deg,#f0c030,#d8a820 40%,#c89818);border-color:#a88028;box-shadow:0 1px 3px #0003,inset 0 1px 2px #00000026}.users-count-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;background:linear-gradient(135deg,#ff6b6b,#ee5a5a);color:#fff;font-size:.7rem;font-weight:700;line-height:18px;text-align:center;border-radius:9px;border:2px solid #f8d878;box-shadow:0 2px 4px #ee5a5a4d;animation:badgePulse 2s infinite;font-family:var(--font-family-base)}@keyframes badgePulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.online-users-popup{min-width:280px;max-width:320px;background:linear-gradient(135deg,#f5e8c8fa,#e8d8b0fa);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:2px solid #c8a860;border-radius:12px;box-shadow:0 8px 24px #00000040,0 4px 12px #8b451326;z-index:10000;animation:popupFadeIn .3s cubic-bezier(.4,0,.2,1);transition:all .3s cubic-bezier(.4,0,.2,1);pointer-events:auto}@keyframes popupFadeIn{0%{opacity:0;transform:translateY(-10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.popup-header{padding:12px 16px;border-bottom:1px solid rgba(200,168,96,.3);background:#c8a8601a;border-radius:12px 12px 0 0}.popup-header h4{margin:0;font-size:1rem;font-weight:700;color:#8b4513;text-align:center;font-family:var(--font-family-room-management)}.popup-content{padding:16px}.users-count{display:flex;align-items:baseline;justify-content:center;gap:8px;margin-bottom:16px;padding:12px;background:#ffffff80;border-radius:8px;border:1px solid rgba(200,168,96,.2)}.count-number{font-size:2rem;font-weight:900;color:#8b4513;font-family:var(--font-family-header);transition:all .3s cubic-bezier(.4,0,.2,1)}.count-number.updating{animation:countUpdate .5s ease}@keyframes countUpdate{0%,to{transform:scale(1)}50%{transform:scale(1.2);color:#4caf50}}.count-label{font-size:.9rem;color:#5a3a1a;font-family:var(--font-family-base)}.users-list{max-height:200px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}.users-list::-webkit-scrollbar{width:6px}.users-list::-webkit-scrollbar-track{background:#c8a8601a;border-radius:3px}.users-list::-webkit-scrollbar-thumb{background:#8b45134d;border-radius:3px}.users-list::-webkit-scrollbar-thumb:hover{background:#8b451380}.user-item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:#fff9;border-radius:6px;border:1px solid rgba(200,168,96,.15);transition:all .2s ease}.user-item:hover{background:#fffc;border-color:#c8a8604d;transform:translate(2px)}.user-name{font-size:.9rem;color:#5a3a1a;font-weight:600;font-family:var(--font-family-base)}.user-status{font-size:.8rem;color:#8b4513;font-weight:600;padding:2px 8px;background:#c8a86033;border-radius:4px;font-family:var(--font-family-base)}.user-status.host{background:#4caf5033;color:#4caf50;border:1px solid rgba(76,175,80,.3)}@media(max-width:768px){.toolbar-btn.online-users-btn{width:40px;height:40px}.online-users-popup{min-width:240px;max-width:280px}.count-number{font-size:1.8rem}.user-item{padding:6px 10px}.user-name{font-size:.85rem}.user-status{font-size:.75rem;padding:2px 6px}}@media(max-width:480px){.toolbar-btn.online-users-btn{width:36px;height:36px}.online-users-popup{min-width:200px;max-width:240px}.popup-header h4{font-size:.9rem}.count-number{font-size:1.5rem}.count-label{font-size:.8rem}.users-count-badge{min-width:16px;height:16px;font-size:.65rem;line-height:16px}}@media(hover:none)and (pointer:coarse){.toolbar-btn.online-users-btn:active{transform:scale(.95)}.user-item:active{transform:scale(.98)}}.live-class-page{position:fixed;inset:0;background:#c4d8e8;display:flex;flex-direction:row;z-index:1000;overflow:hidden}.left-toolbar{width:100px;min-width:100px;background:linear-gradient(180deg,#14b8a6,#2dd4bf 15%,#14b8a6);border-right:2px solid #0D9488;display:flex;flex-direction:column;align-items:center;padding:8px;gap:4px;overflow-y:auto;box-shadow:2px 0 6px #00000026}.left-toolbar::-webkit-scrollbar{width:4px}.left-toolbar::-webkit-scrollbar-thumb{background:#388e3c4d;border-radius:2px}.toolbar-btn{width:84px;height:56px;border:1px solid #0F766E;border-radius:10px;background:linear-gradient(180deg,#5eead4,#2dd4bf,#14b8a6);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease;box-shadow:0 2px 3px #0003,inset 0 1px #fff6;padding:3px 2px 1px;gap:1px}.toolbar-btn:hover{transform:scale(1.04);box-shadow:0 3px 6px #00000040,inset 0 1px #fff6}.toolbar-btn:active{transform:scale(.97);box-shadow:0 1px 2px #0003,inset 0 1px 2px #0000001a;background:linear-gradient(180deg,#deb887,tan,#c4a67c)!important;border-color:#b8956e!important}.toolbar-btn.active{background:linear-gradient(180deg,#deb887,tan,#c4a67c);box-shadow:0 2px 6px #c4a67c80,inset 0 1px #ffffff80;border-color:#b8956e}.toolbar-btn.muted svg path{fill:#888!important}.toolbar-btn.primary-btn{background:linear-gradient(180deg,#0d9488,#0f766e,#115e59)!important;border-color:#134e4a!important}.toolbar-btn.stone-toolbar-group{width:84px;height:auto;min-height:auto;padding:6px 4px 8px;display:flex;flex-wrap:wrap;gap:5px;justify-content:center;align-items:center;align-content:flex-start;overflow:visible}.toolbar-btn.playback-toolbar-group{width:84px;height:auto;min-height:auto;padding:3px;display:flex;flex-direction:column;gap:2px;justify-content:center;align-items:center;align-content:flex-start;overflow:visible}.toolbar-btn.playback-toolbar-group .playback-row{display:flex;flex-direction:row;gap:2px;justify-content:center;align-items:center;width:100%}.toolbar-btn.playback-toolbar-group .playback-btn{width:38px;height:26px;padding:0;border-width:1px;flex:1}.toolbar-btn.playback-toolbar-group .playback-btn svg{width:18px;height:18px}.toolbar-btn.playback-toolbar-group .play-btn-full{width:100%;height:28px}.toolbar-btn.playback-toolbar-group .playback-counter{font-size:9px;color:#5a3a1a;font-weight:700;text-align:center;padding:2px 0;background:#ffffff4d;border-radius:4px;width:100%}.toolbar-btn.playback-toolbar-group .toggle-switch-container{width:100%;height:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;position:relative;gap:1px}.toolbar-btn.playback-toolbar-group .toggle-switch-container input{opacity:0;width:0;height:0;position:absolute}.toolbar-btn.playback-toolbar-group .toggle-switch-slider{width:30px;height:14px;background:#ccc;border-radius:7px;position:relative;transition:all .3s}.toolbar-btn.playback-toolbar-group .toggle-switch-slider:before{content:"";position:absolute;height:12px;width:12px;left:1px;bottom:1px;background:#fff;border-radius:50%;transition:all .3s}.toolbar-btn.playback-toolbar-group .toggle-switch-container input:checked+.toggle-switch-slider{background:#deb887}.toolbar-btn.playback-toolbar-group .toggle-switch-container input:checked+.toggle-switch-slider:before{transform:translate(16px);background:tan}.toolbar-btn.draw-toolbar-group{width:84px;height:auto;min-height:auto;padding:4px;display:flex;flex-direction:column;gap:3px;justify-content:center;align-items:center}.toolbar-btn.draw-toolbar-group .draw-row{display:flex;flex-direction:row;gap:3px;justify-content:center;align-items:center;width:100%}.toolbar-btn.draw-toolbar-group .draw-btn{width:36px;height:30px;border:1px solid #2e7d32;border-radius:6px;background:linear-gradient(180deg,#f8d878,#e8c048,#d8b038);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s ease;padding:0}.toolbar-btn.draw-toolbar-group .draw-btn:hover{transform:scale(1.05)}.toolbar-btn.draw-toolbar-group .draw-btn.active{background:linear-gradient(180deg,#ffe066,#f0c830,#e0b020);border-color:#5c3a1e;box-shadow:0 0 0 2px #5c3a1e,0 2px 6px #c8a01466,inset 0 1px #fff6}.toolbar-btn.draw-toolbar-group:hover{transform:none;box-shadow:0 2px 3px #0003,inset 0 1px #fff6}.toolbar-btn.playback-toolbar-group .toggle-switch-label{font-size:11px;color:#5a3a1a;font-weight:700;white-space:nowrap;text-align:center;line-height:1}.toolbar-btn.playback-toolbar-group .toggle-switch-container.disabled{cursor:not-allowed;opacity:.5}.toolbar-btn.playback-toolbar-group .toggle-switch-container.disabled .toggle-switch-slider{background:#aaa}.toolbar-btn.stone-toolbar-group .stone-btn{width:32px;height:32px;flex:0 0 auto}.toolbar-btn.stone-toolbar-group .toggle-switch-container{width:100%;height:auto;display:flex;flex-direction:row;align-items:center;justify-content:center;cursor:pointer;position:relative;gap:6px;padding:4px 0;background:#ffffff2e;border-radius:6px;border:1px solid rgba(46,125,50,.25);transition:all .18s ease}.toolbar-btn.stone-toolbar-group .toggle-switch-container:hover{background:#ffffff52;border-color:#2e7d3273}.toolbar-btn.stone-toolbar-group .toggle-switch-container input{opacity:0;width:0;height:0;position:absolute}.toolbar-btn.stone-toolbar-group .toggle-switch-slider{width:30px;height:16px;background:#ccc;border-radius:8px;position:relative;transition:all .3s;flex-shrink:0}.toolbar-btn.stone-toolbar-group .toggle-switch-slider:before{content:"";position:absolute;height:12px;width:12px;left:2px;bottom:2px;background:#fff;border-radius:50%;transition:all .3s;box-shadow:0 1px 2px #0003}.toolbar-btn.stone-toolbar-group .toggle-switch-container input:checked+.toggle-switch-slider{background:#deb887;box-shadow:0 0 6px #deb88780}.toolbar-btn.stone-toolbar-group .toggle-switch-container input:checked+.toggle-switch-slider:before{transform:translate(14px)}.toolbar-btn.stone-toolbar-group .toggle-switch-label{font-size:11px;color:#1b5e20;font-weight:800;white-space:nowrap;text-align:center;line-height:1;letter-spacing:.5px;text-shadow:0 1px 0 rgba(255,255,255,.4)}.toolbar-btn.stone-toolbar-group .black-stone,.toolbar-btn.stone-toolbar-group .white-stone{width:26px;height:26px}.toolbar-btn.stone-toolbar-group .tool-btn{width:100%;height:34px;padding:4px 6px;border-radius:8px;border:1px solid #b89838;background:linear-gradient(180deg,#f8d878,#e8c048,#d8b038);box-shadow:0 2px 4px #0000002e,inset 0 1px #ffffff80;transition:all .18s ease;cursor:pointer}.toolbar-btn.stone-toolbar-group .tool-btn span{font-size:11px;font-weight:800;color:#5a3a1a;text-shadow:0 1px 0 rgba(255,255,255,.5);letter-spacing:.5px;line-height:1}.toolbar-btn.stone-toolbar-group .tool-btn:hover{transform:translateY(-2px);background:linear-gradient(180deg,#ffe48c,#f0c850,#e0b840);box-shadow:0 5px 10px #d8a82073,inset 0 1px #fff9;border-color:#a08020}.toolbar-btn.stone-toolbar-group .tool-btn:hover span{color:#3a2810}.toolbar-btn.stone-toolbar-group .tool-btn:active{transform:translateY(1px);box-shadow:0 1px 2px #0003,inset 0 2px 4px #0000001f}.toolbar-btn.stone-toolbar-group:hover{transform:none;box-shadow:0 2px 3px #0003,inset 0 1px #fff6}.toolbar-btn.stone-toolbar-group .stone-btn:hover:not(.active){transform:scale(1.12);box-shadow:0 0 8px #ffd70066}.back-btn{width:84px!important;height:32px!important;border-radius:8px!important;margin-bottom:2px;background:linear-gradient(180deg,#fde68a,#f59e0b)!important;border:2px solid #D97706!important;flex-direction:row!important;gap:4px!important;padding:0 6px!important}.back-btn svg{width:18px!important;height:18px!important;flex-shrink:0}.back-btn .toolbar-label{max-width:none}.toolbar-label{font-size:11px;color:#1b5e20;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:78px;text-align:center;line-height:1.1}.expression-icon{font-size:20px;line-height:1}.main-content{flex:1 1 0%;display:flex;flex-direction:row;overflow:hidden;min-width:0;min-height:0;align-items:stretch}.board-area{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px;min-width:0;background:linear-gradient(180deg,#a8c8d8,#c0d4e0,#d0dcc4);transition:all .3s ease;gap:8px}.board-container{width:100%;height:auto;display:flex;align-items:center;justify-content:center}.board-wrapper{position:relative;border-radius:2px;box-shadow:inset 0 0 0 1px #c8956a,0 4px 16px #0003}.board-interaction-area{position:absolute;inset:0}.board-canvas{position:absolute;top:0;left:0;width:100%;height:100%}.draw-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.board-container.reversed{transform:scaleX(-1)}.magnifier{position:absolute;width:80px;height:80px;border-radius:50%;border:3px solid #8B7355;box-shadow:0 0 12px #0000004d;pointer-events:none;z-index:100;overflow:hidden;background:#ffffff1a}.magnifier-content{width:100%;height:100%;border-radius:50%}.expression-popup{position:absolute;bottom:20px;left:50%;transform:translate(-50%);background:#fffffff5;border-radius:14px;padding:10px;display:flex;flex-wrap:wrap;gap:4px;max-width:220px;box-shadow:0 4px 16px #0003;z-index:100;border:1px solid rgba(0,0,0,.1)}.expression-item{font-size:22px;cursor:pointer;padding:4px;border-radius:6px;transition:background .15s;line-height:1}.expression-item:hover{background:#00000014}.right-panel{width:400px;min-width:400px;max-width:400px;background:linear-gradient(180deg,#f0e0b8,#e8d4a0 30%,#f8eed8);border-left:2px solid #c8a860;display:flex;flex-direction:column;padding:0;gap:0;overflow:hidden;box-shadow:-2px 0 6px #0000001a;flex-shrink:0;transition:width .3s ease,min-width .3s ease,max-width .3s ease;min-height:0;height:100%}.right-panel.collapsed{width:0;min-width:0;max-width:0;border-left:none;box-shadow:none;overflow:hidden}.right-panel::-webkit-scrollbar{width:4px}.right-panel::-webkit-scrollbar-thumb{background:#8b5a2b40;border-radius:2px}.btn-row{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.btn-row-3{grid-template-columns:repeat(3,1fr)!important}.panel-btn{padding:7px 2px;border:1px solid #b89838;border-radius:8px;background:linear-gradient(180deg,#f8d878,#e8c048 40%,#d8b038);color:#5a3a1a;font-size:11.5px;font-weight:800;cursor:pointer;transition:all .12s ease;box-shadow:0 2px 3px #00000026,inset 0 1px #ffffff80;white-space:nowrap;text-shadow:0 1px 0 rgba(255,255,255,.4);letter-spacing:.5px}.panel-btn:hover{transform:translateY(-1px);box-shadow:0 3px 6px #0003,inset 0 1px #ffffff80}.panel-btn:active{transform:translateY(1px);box-shadow:0 1px 2px #00000026,inset 0 1px 2px #0000001a}.panel-btn.primary{background:linear-gradient(180deg,#f0c030,#d8a820 40%,#c89818);color:#5a2800;border-color:#a88028}.tool-panel{background:linear-gradient(180deg,#f5e8c8,#e8d8b0);border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px;border:1px solid #c8a860}.tool-row{display:flex;gap:4px;justify-content:center;flex-wrap:wrap}.tool-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid #b89838;border-radius:7px;background:linear-gradient(180deg,#f8d878,#e8c048,#d8b038);cursor:pointer;transition:all .12s ease;box-shadow:0 1px 3px #00000026;gap:1px;padding:2px}.tool-btn:hover{transform:scale(1.05)}.tool-btn:active{transform:scale(.96)}.tool-btn.active{background:linear-gradient(180deg,#ffe066,#f0c830,#e0b020);box-shadow:0 2px 6px #c8a01466,inset 0 1px #fff6}.tool-btn span{font-size:9px;color:#5a3a1a;font-weight:700;line-height:1}.stone-row{gap:6px}.stone-btn{width:38px;height:38px;border:3px solid transparent;border-radius:50%;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease;padding:0}.stone-btn.active,.stone-btn.locked-indicator{border-color:#deb887;box-shadow:0 0 8px #deb88799}.black-stone{width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#666,#1a1a1a);box-shadow:1px 1px 3px #0000004d}.white-stone{width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#ddd);border:1px solid #bbb;box-shadow:1px 1px 3px #0003}.trial-panel{display:flex;gap:5px;justify-content:center}.trial-btn{padding:7px 10px;border:1px solid #b89838;border-radius:7px;background:linear-gradient(180deg,#f8d878,#e8c048,#d8b038);color:#5a3a1a;font-size:11px;font-weight:800;cursor:pointer;transition:all .12s ease;box-shadow:0 2px 3px #00000026;text-shadow:0 1px 0 rgba(255,255,255,.4)}.trial-btn:hover{transform:translateY(-1px)}.trial-btn:active{transform:translateY(1px)}.trial-btn.active{background:linear-gradient(180deg,#deb887,tan,#c4a67c);color:#5a3a1a;border-color:#b8956e;box-shadow:0 2px 6px #c4a67c66}.trial-btn.secondary{background:linear-gradient(180deg,#ddd,#bbb,#aaa);color:#666;border-color:#999}.playback-controls{display:flex;gap:3px;justify-content:center;align-items:center;padding:6px 4px;background:linear-gradient(180deg,#f5e8c8,#e8d8b0);border-radius:10px;border:1px solid #c8a860}.playback-btn{width:34px;height:34px;border:1px solid #b89838;border-radius:6px;background:linear-gradient(180deg,#f8d878,#e8c048,#d8b038);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s ease;box-shadow:0 1px 3px #00000026;padding:0}.playback-btn:hover{transform:scale(1.06)}.playback-btn:active{transform:scale(.96)}.play-btn{width:40px;height:40px;background:linear-gradient(180deg,#f0c030,#d8a820,#c89818);border-color:#a88028}.play-btn.playing{background:linear-gradient(180deg,#deb887,tan,#c4a67c);border-color:#b8956e}.bottom-section{display:flex;flex-direction:column;gap:6px}.bottom-tabs{display:flex;gap:4px;justify-content:center}.tab-btn{padding:5px 10px;border:1px solid #b89838;border-radius:6px;background:linear-gradient(180deg,#ddd,#bbb);color:#666;font-size:11px;font-weight:700;cursor:pointer;transition:all .12s ease}.tab-btn:hover{transform:translateY(-1px)}.tab-btn.active{background:linear-gradient(180deg,#f8d878,#e8c048,#d8b038);color:#5a3a1a}.bottom-actions{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}.action-btn{padding:5px 8px;border:1px solid #b89838;border-radius:6px;background:linear-gradient(180deg,#f8d878,#e8c048,#d8b038);color:#5a3a1a;font-size:10.5px;font-weight:700;cursor:pointer;transition:all .12s ease;box-shadow:0 1px 2px #0000001f}.action-btn:hover{transform:translateY(-1px)}.action-btn:active{transform:translateY(1px)}.action-btn.primary{background:linear-gradient(180deg,#f0c030,#d8a820,#c89818);border-color:#a88028}.action-btn.active{background:linear-gradient(180deg,#deb887,tan,#c4a67c);border-color:#b8956e;color:#5a3a1a}.action-btn.disabled-btn{background:linear-gradient(180deg,#ddd,#bbb);color:#999;border-color:#aaa;cursor:not-allowed;opacity:.6}.clear-example-btn{background:linear-gradient(180deg,#f8a8a8,#e88080,#d86868)!important;border-color:#c85858!important;color:#5a1a1a!important}.modal-overlay{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:2000}.modal-content{background:linear-gradient(180deg,#fff8e0,#f0e0c0);border-radius:14px;padding:20px 24px;min-width:280px;max-width:90vw;box-shadow:0 8px 28px #0000004d;border:2px solid #c8a860}.modal-content h3{margin:0 0 12px;color:#5a3a1a;text-align:center;font-size:1.15rem}.modal-content p{color:#666;text-align:center;margin-bottom:14px;font-size:13px}.modal-actions{display:flex;gap:10px;justify-content:center}.modal-btn{padding:7px 22px;border:1px solid #b89838;border-radius:7px;font-size:13px;font-weight:700;cursor:pointer;transition:all .12s ease}.modal-btn.cancel{background:linear-gradient(180deg,#ddd,#bbb);color:#666;border-color:#999}.modal-btn:hover{transform:translateY(-1px)}.modal-btn:active{transform:translateY(1px)}.interaction-container{flex:1 1 auto;display:flex;flex-direction:column;background:linear-gradient(180deg,#fff8e0,#f0e0c0);width:100%;height:100%;min-height:0;overflow:hidden;position:relative;padding-bottom:265px;box-sizing:border-box}.interaction-header{display:flex;align-items:center;justify-content:space-between;padding:4px 12px;background:linear-gradient(180deg,#f8d878,#e8c048);border-bottom:2px solid #c8a860;flex-shrink:0}.interaction-header h3{margin:0;color:#5a3a1a;font-size:14px}.toggle-btn{padding:4px 12px;border:1px solid #b89838;border-radius:6px;background:linear-gradient(180deg,#f8d878,#e8c048);color:#5a3a1a;font-size:11px;font-weight:700;cursor:pointer;transition:all .12s ease}.toggle-btn:hover{transform:translateY(-1px);box-shadow:0 2px 4px #0003}.toggle-btn:active{transform:translateY(1px)}.live-chat-overlay{z-index:3000!important}.live-chat-panel{width:420px;max-height:90vh;background:linear-gradient(180deg,#fff8e0,#f0e0c0);border-radius:16px;box-shadow:0 12px 40px #00000059;border:2px solid #c8a860;display:flex;flex-direction:column;overflow:hidden}.live-chat-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:linear-gradient(180deg,#f8d878,#e8c048);border-bottom:2px solid #c8a860}.live-chat-header h3{margin:0;color:#5a3a1a;font-size:16px}.close-btn{width:32px;height:32px;border:none;border-radius:50%;background:#ffffff4d;color:#5a3a1a;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}.close-btn:hover{background:#f003}.live-video-container{position:absolute;bottom:0;left:0;right:0;width:100%;height:265px;background:#222;overflow:hidden;border-radius:0;box-shadow:0 -2px 8px #0003}.live-video{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block}.live-badge{position:absolute;top:10px;left:10px;display:flex;align-items:center;gap:5px;background:#dc2626e6;color:#fff;padding:3px 10px;border-radius:12px;font-size:12px;font-weight:700;letter-spacing:.5px}.live-dot{width:8px;height:8px;border-radius:50%;background:#fff;animation:livePulse 1.5s infinite}@keyframes livePulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}.live-class-page .chat-area{flex:1 1 0;min-height:0;max-height:none;padding:0;display:flex;flex-direction:column;overflow:hidden}.chat-messages{flex:1 1 0;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:12px;min-height:0}.chat-messages::-webkit-scrollbar{width:4px}.chat-messages::-webkit-scrollbar-thumb{background:#8b5a2b40;border-radius:2px}.chat-message{display:flex;gap:10px;align-items:flex-start;padding:4px 0}.chat-avatar{width:38px;height:38px;border-radius:50%;background:#c8a86033;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}.chat-bubble{flex:1;min-width:0}.chat-name-row{display:flex;align-items:center;gap:8px;margin-bottom:2px}.chat-name{font-size:12px;font-weight:700;color:#5a3a1a}.chat-message.teacher .chat-name{color:#c85800}.chat-time{font-size:9px;color:#999}.chat-text{font-size:13px;color:#333;line-height:1.5;word-break:break-word}.chat-message.teacher .chat-text{color:#5a3a1a}.chat-input-area{display:flex;align-items:center;gap:6px;padding:6px 10px;border-top:1px solid #e0d0b0;background:#ffffff80;flex-shrink:0;position:relative}.chat-emoji-btn{width:34px;height:34px;border:1px solid #c8a860;border-radius:6px;background:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s;flex-shrink:0;line-height:1;padding:0;box-sizing:border-box}.chat-emoji-btn:hover{background:#fff8e0;border-color:#b89838}.chat-emoji-btn.active{background:#f8d878;border-color:#b89838}.chat-emoji-popup{position:absolute;bottom:calc(100% + 6px);left:10px;right:10px;background:#fff;border:1px solid #c8a860;border-radius:10px;padding:8px;display:grid;grid-template-columns:repeat(8,1fr);gap:3px;box-shadow:0 6px 18px #0000002e;z-index:20;max-height:200px;overflow-y:auto}.chat-emoji-popup::-webkit-scrollbar{width:4px}.chat-emoji-popup::-webkit-scrollbar-thumb{background:#8b5a2b40;border-radius:2px}.chat-emoji-item{font-size:18px;cursor:pointer;text-align:center;padding:3px 0;border-radius:5px;transition:background .12s;-webkit-user-select:none;-moz-user-select:none;user-select:none;line-height:1.2}.chat-emoji-item:hover{background:#fff8e0}.chat-input{flex:1;height:34px;padding:0 10px;border:1px solid #c8a860;border-radius:6px;font-size:13px;outline:none;background:#fff;box-sizing:border-box}.chat-input:focus{border-color:#d8a820;box-shadow:0 0 0 2px #d8a82033}.chat-send-btn{height:34px;padding:0 14px;border:none;border-radius:6px;background:linear-gradient(180deg,#f0c030,#d8a820);color:#5a2800;font-size:13px;font-weight:700;cursor:pointer;transition:all .12s;white-space:nowrap;flex-shrink:0;box-sizing:border-box}.chat-send-btn:hover{transform:translateY(-1px);box-shadow:0 2px 4px #0003}.chat-send-btn:active{transform:translateY(0)}@media(max-width:1100px){.right-panel{width:300px;min-width:300px;max-width:300px}}@media(max-width:900px){.main-content{flex-direction:column}.board-area{flex:none;height:50vh}.right-panel{width:100%;min-width:100%;max-width:100%;flex:1}.live-chat-panel{width:360px}}@media(max-width:768px){.live-class-page{flex-direction:column}.left-toolbar{width:100%;min-width:100%;height:auto;flex-direction:row;flex-wrap:wrap;justify-content:center;padding:6px 4px;gap:4px;border-right:none;border-top:2px solid #0D9488;order:2;flex-shrink:0;overflow-x:auto;overflow-y:hidden;box-shadow:0 -2px 6px #00000026}.left-toolbar::-webkit-scrollbar{height:3px}.toolbar-btn{width:52px;height:44px;min-width:44px;min-height:44px;border-radius:8px;padding:2px;gap:0}.toolbar-btn.stone-toolbar-group{width:auto;min-height:44px;padding:4px 6px;flex-direction:row;flex-wrap:nowrap;gap:3px}.toolbar-btn.stone-toolbar-group .stone-btn{width:28px;height:28px}.toolbar-btn.stone-toolbar-group .tool-btn{width:auto;height:30px;padding:2px 8px}.toolbar-btn.stone-toolbar-group .toggle-switch-container{flex-direction:row;gap:3px;padding:2px 4px}.toolbar-btn.stone-toolbar-group .toggle-switch-label{font-size:9px}.toolbar-btn.playback-toolbar-group{width:auto;min-height:44px;padding:3px;flex-direction:row;gap:2px}.toolbar-btn.playback-toolbar-group .playback-row{width:auto}.toolbar-btn.playback-toolbar-group .playback-btn{width:30px;height:24px}.toolbar-btn.playback-toolbar-group .playback-counter{font-size:8px;min-width:30px}.toolbar-btn.draw-toolbar-group{width:auto;min-height:44px;flex-direction:row;padding:2px}.toolbar-btn.draw-toolbar-group .draw-btn{width:30px;height:28px}.toolbar-label{font-size:9px;max-width:46px}.expression-icon{font-size:18px}.back-btn{width:auto!important;height:36px!important;min-width:44px;min-height:44px;padding:0 8px!important;margin-bottom:0;border-radius:8px!important}.back-btn svg{width:16px!important;height:16px!important}.main-content{flex-direction:column;order:0;flex:1}.board-area{flex:1;height:auto;min-height:50vh;padding:4px;gap:4px}.board-container{max-width:100vw;max-height:55vh}.magnifier{width:50px;height:50px;border-width:2px}.expression-popup{max-width:180px;padding:6px;gap:3px;bottom:10px}.expression-item{font-size:18px;padding:2px}.right-panel{width:100%;min-width:100%;max-width:100%;flex:none;max-height:40vh;border-left:none;border-top:2px solid #c8a860;border-radius:16px 16px 0 0;box-shadow:0 -4px 16px #00000026;transition:max-height .3s ease}.right-panel.collapsed{width:100%;min-width:100%;max-width:100%;max-height:0;border-top:none;overflow:hidden}.interaction-container{padding-bottom:180px}.live-video-container{height:180px}.panel-btn{padding:8px 4px;font-size:11px;min-height:40px;border-radius:6px}.btn-row{grid-template-columns:repeat(4,1fr);gap:3px}.btn-row-3{grid-template-columns:repeat(3,1fr)!important}.tool-btn{width:40px;height:40px;min-width:40px;min-height:40px}.stone-btn{width:36px;height:36px;min-width:36px;min-height:36px}.black-stone,.white-stone{width:26px;height:26px}.tool-btn span{font-size:8px}.trial-btn{padding:8px 12px;font-size:11px;min-height:40px}.playback-controls{padding:4px;gap:2px}.playback-btn{width:32px;height:32px;min-width:32px;min-height:32px}.play-btn{width:38px;height:38px;min-width:38px;min-height:38px}.bottom-tabs{gap:2px}.tab-btn,.action-btn{padding:6px 8px;font-size:10px;min-height:36px}.modal-content{min-width:auto;max-width:95vw;padding:16px;border-radius:12px}.modal-content h3{font-size:1rem}.modal-content p{font-size:12px;margin-bottom:12px}.modal-btn{padding:8px 20px;font-size:12px;min-height:40px}.live-chat-panel{width:95vw;max-width:95vw;max-height:85vh;border-radius:12px}.live-chat-header{padding:10px 12px}.live-chat-header h3{font-size:14px}.close-btn{width:36px;height:36px;min-width:36px;min-height:36px}.chat-messages{padding:10px;gap:8px}.chat-avatar{width:34px;height:34px}.chat-name{font-size:11px}.chat-text{font-size:12px}.chat-input-area{padding:4px 8px;gap:4px}.chat-emoji-btn{width:36px;height:36px;min-width:36px;min-height:36px}.chat-input{height:36px;font-size:16px}.chat-send-btn{height:36px;padding:0 12px;font-size:12px}}@media(max-width:480px){.left-toolbar{padding:4px 2px;gap:2px}.toolbar-btn{width:44px;height:40px;min-width:44px;min-height:40px;border-radius:6px;padding:1px}.toolbar-label{font-size:8px;max-width:38px}.toolbar-btn.stone-toolbar-group{padding:2px 4px;gap:2px}.toolbar-btn.stone-toolbar-group .stone-btn{width:24px;height:24px}.toolbar-btn.stone-toolbar-group .black-stone,.toolbar-btn.stone-toolbar-group .white-stone{width:20px;height:20px}.toolbar-btn.playback-toolbar-group .playback-btn{width:26px;height:22px}.toolbar-btn.draw-toolbar-group .draw-btn{width:26px;height:24px}.board-area{min-height:45vh}.board-container{max-height:48vh}.right-panel{max-height:38vh}.interaction-container{padding-bottom:140px}.live-video-container{height:140px}.panel-btn{padding:6px 2px;font-size:10px;min-height:36px}.tool-btn{width:36px;height:36px;min-width:36px;min-height:36px}.stone-btn{width:32px;height:32px;min-width:32px;min-height:32px}.playback-btn{width:28px;height:28px;min-width:28px;min-height:28px}.action-btn,.tab-btn{padding:4px 6px;font-size:9px;min-height:32px}.live-chat-panel{width:100vw;max-width:100vw;max-height:90vh;border-radius:0}}@media(max-width:375px){.left-toolbar{padding:2px 1px;gap:1px}.toolbar-btn{width:38px;height:36px;min-width:38px;min-height:36px;border-radius:4px}.toolbar-label{font-size:7px;max-width:32px}.toolbar-btn svg{width:14px;height:14px}.expression-icon{font-size:15px}.board-area{min-height:40vh;padding:2px}.board-container{max-height:43vh}.interaction-container{padding-bottom:120px}.live-video-container{height:120px}.panel-btn{padding:5px 2px;font-size:9px;min-height:32px}}.level-select-page{position:fixed;inset:0;min-height:100vh;background:linear-gradient(135deg,#f0fdfa,#ccfbf1,#99f6e4);display:flex;flex-direction:column;z-index:2000;overflow-y:auto}.levels-loading{display:flex;align-items:center;justify-content:center;min-height:300px;font-size:1.1rem;color:#0d9488}.level-cat-decorations{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}.level-cat-bg-icon{position:absolute;opacity:.08}.level-cat-bg-top-right{top:8%;right:3%;transform:rotate(-15deg)}.level-cat-bg-right{top:55%;right:5%;transform:rotate(25deg)}.level-cat-bg-bottom{bottom:10%;left:10%;transform:rotate(-10deg)}.level-select-header{display:flex;align-items:center;gap:20px;padding:18px 30px;background:linear-gradient(135deg,#14b8a6,#0d9488);box-shadow:0 4px 16px #0d94884d;position:relative;z-index:1}.back-btn-svg{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:#0d94888c;color:#fff;border:2px solid rgba(255,255,255,.35);border-radius:25px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.back-btn-svg:hover{background:#ffffff40;border-color:#ffffff80;transform:translate(-3px);box-shadow:0 4px 15px #00000026}.back-btn-svg svg{width:20px;height:20px}.level-select-header h2{margin:0;font-size:1.8rem;color:#fff;font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.15)}.level-select-content{flex:1;padding:30px;max-width:800px;margin:0 auto;width:100%;position:relative;z-index:1}.level-description{text-align:center;margin-bottom:30px;display:flex;flex-direction:column;align-items:center;gap:12px}.level-description p{color:#134e4a;font-size:1rem;margin:0;line-height:1.6}.levels-container{display:flex;flex-direction:column;gap:14px}.level-card{display:flex;align-items:center;gap:16px;padding:20px 24px;background:#ffffffd9;border:2px solid rgba(20,184,166,.15);border-radius:16px;cursor:pointer;transition:all .3s ease;text-align:left;box-shadow:0 2px 8px #14b8a61a;position:relative;overflow:hidden}.level-card:before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:linear-gradient(180deg,#14b8a6,#0d9488);border-radius:0 2px 2px 0}.level-card:hover{transform:translateY(-3px) translate(4px);box-shadow:0 8px 24px #14b8a633;border-color:#14b8a659;background:#fffffff2}.level-card.completed{background:#f0fdfaf2;border-color:#10b9814d}.level-card.completed:before{background:linear-gradient(180deg,#10b981,#059669)}.level-card.completed:hover{background:#f0fdfa;border-color:#10b98180}.level-card-icon{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#14b8a6,#0d9488);display:flex;align-items:center;justify-content:center;flex-shrink:0}.level-card-icon svg{opacity:.9}.level-info{display:flex;flex-direction:column;gap:4px;flex:1}.level-number{font-size:.8rem;color:#6ee7b7;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.level-title{font-size:1.15rem;color:#134e4a;font-weight:600}.level-meta{display:flex;align-items:center;gap:10px;flex-shrink:0}.difficulty-badge{padding:4px 14px;border-radius:20px;font-size:.75rem;font-weight:600;background:#ffffff40;color:#134e4a;border:1px solid rgba(20,184,166,.2)}.diff-入门{background:#10b9811f;border-color:#10b9814d;color:#059669}.diff-初级{background:#3b82f61f;border-color:#3b82f64d;color:#2563eb}.diff-中级{background:#f59e0b1f;border-color:#f59e0b4d;color:#d97706}.diff-高级{background:#ef44441f;border-color:#ef44444d;color:#dc2626}.diff-大师{background:#8b5cf61f;border-color:#8b5cf64d;color:#7c3aed}.completed-badge{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#10b981,#059669);display:flex;align-items:center;justify-content:center;color:#fff;font-size:.8rem;font-weight:700}@media(max-width:768px){.level-select-header{padding:14px 20px}.level-select-header h2{font-size:1.4rem}.level-select-content{padding:20px}.level-card{padding:16px 18px;gap:12px}.level-title{font-size:1rem}.level-card-icon{width:34px;height:34px}.level-card-icon svg{width:22px;height:22px}}.tutorial-simple-board{width:100%;max-width:520px;display:flex;flex-direction:column;align-items:center;gap:10px}.tutorial-board-header{width:100%;display:flex;align-items:center;gap:12px;background:#ffffffeb;border-radius:16px;padding:12px 16px;box-shadow:0 2px 12px #14b8a61a;border:1px solid rgba(20,184,166,.08)}.tutorial-board-back{display:inline-flex;align-items:center;gap:4px;padding:7px 13px;background:#14b8a61a;color:#0d9488;border:1px solid rgba(20,184,166,.2);border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;transition:all .3s ease;flex-shrink:0}.tutorial-board-back:hover{background:#14b8a62e;transform:translate(-2px)}.tutorial-board-task-info{flex:1;min-width:0}.tutorial-board-task-info .task-label{font-size:.95rem;color:#134e4a;font-weight:700}.tutorial-board-task-info .task-desc{font-size:.78rem;color:#6b7280;margin-top:2px}.tutorial-hint-btn{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;background:#f59e0b1a;color:#92400e;border:1px solid rgba(245,158,11,.2);border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;transition:all .3s ease;flex-shrink:0}.tutorial-hint-btn:hover{background:#f59e0b2e}.tutorial-hint-btn.active{background:#f59e0b40;border-color:#f59e0b;color:#92400e}.tutorial-reset-btn{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;background:#6b728014;color:#6b7280;border:1px solid rgba(107,114,128,.15);border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;transition:all .3s ease;flex-shrink:0}.tutorial-reset-btn:hover{background:#6b728029;color:#374151}.tutorial-board-task-hint{width:100%;background:linear-gradient(135deg,#fef3c7,#fde68a);border:1px solid rgba(251,191,36,.3);border-radius:12px;padding:10px 18px;font-size:.85rem;color:#92400e;font-weight:500;box-shadow:0 2px 8px #fbbf2426}.tutorial-board-wrapper-inner{width:100%;display:flex;justify-content:center}.tutorial-target-marker{display:flex;align-items:center;justify-content:center}.tutorial-target-ring{width:76%;height:76%;border-radius:50%;border:3px solid #FBBF24;background-color:#fef3c759;animation:tutorial-target-pulse 1.5s ease-in-out infinite}@keyframes tutorial-target-pulse{0%,to{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}.tutorial-liberty-marker{display:flex;align-items:center;justify-content:center}.tutorial-liberty-ring{width:70%;height:70%;border-radius:50%;border:2.5px solid #10B981;background-color:#10b98126;display:flex;align-items:center;justify-content:center;animation:tutorial-liberty-pulse 2s ease-in-out infinite}.tutorial-liberty-text{font-size:12px;font-weight:700;color:#059669;font-family:YouYuan,幼圆,Microsoft YaHei,sans-serif;-webkit-user-select:none;-moz-user-select:none;user-select:none}@keyframes tutorial-liberty-pulse{0%,to{opacity:.5;transform:scale(1)}50%{opacity:.9;transform:scale(1.06)}}.tutorial-capture-flash{width:100%;height:100%;border-radius:50%;background:radial-gradient(circle,#ef4444b3,#ef444400 70%);animation:capture-flash-pulse .8s ease-out forwards}@keyframes capture-flash-pulse{0%{opacity:1;transform:scale(.5)}50%{opacity:.8;transform:scale(1.2)}to{opacity:0;transform:scale(1.8)}}.tutorial-question-panel{width:100%;background:#ffffffeb;border:1px solid rgba(20,184,166,.12);border-radius:16px;padding:18px 20px;box-shadow:0 2px 12px #14b8a61a}.tutorial-question-title{display:flex;align-items:center;gap:10px;font-size:1rem;font-weight:700;color:#134e4a;margin-bottom:14px}.question-marker-icon{display:flex;align-items:center;flex-shrink:0}.tutorial-question-options{display:flex;flex-direction:column;gap:10px}.tutorial-option-btn{display:flex;align-items:center;gap:12px;padding:12px 18px;background:#fff;border:2px solid rgba(20,184,166,.2);border-radius:14px;font-size:14px;font-weight:600;color:#134e4a;cursor:pointer;transition:all .3s ease;text-align:left;width:100%}.tutorial-option-btn:hover:not(:disabled){border-color:#14b8a680;background:#14b8a60d;transform:translate(4px)}.tutorial-option-btn:disabled{cursor:default}.tutorial-option-btn.option-correct{border-color:#10b981;background:#ecfdf5;animation:option-correct-flash .4s ease}@keyframes option-correct-flash{0%{background:#d1fae5}to{background:#ecfdf5}}.tutorial-option-btn.option-wrong{border-color:#ef4444;background:#fef2f2;color:#991b1b;animation:option-wrong-shake .4s ease}@keyframes option-wrong-shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.option-letter{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,#14b8a6,#0d9488);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}.tutorial-option-btn.option-correct .option-letter{background:linear-gradient(135deg,#10b981,#059669)}.tutorial-option-btn.option-wrong .option-letter{background:linear-gradient(135deg,#ef4444,#dc2626)}.option-label{flex:1}.option-icon{flex-shrink:0}.tutorial-board-footer{width:100%;display:flex;align-items:center;justify-content:space-between;padding:8px 0}.current-turn-indicator{display:flex;align-items:center;gap:10px;padding:10px 18px;background:#ffffffe6;border-radius:25px;font-size:14px;font-weight:600;color:#134e4a;box-shadow:0 2px 8px #14b8a61a;border:1px solid rgba(20,184,166,.08)}.turn-stone{width:22px;height:22px;border-radius:50%;flex-shrink:0}.turn-stone.black{background:radial-gradient(circle at 35% 35%,#555,#111)}.turn-stone.white{background:radial-gradient(circle at 35% 35%,#fff,#d4d4d4);border:1px solid #ccc}.remaining-moves{padding:8px 16px;background:#14b8a61a;border-radius:20px;font-size:13px;font-weight:600;color:#0d9488}.tutorial-forbidden-modal{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:4001;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.forbidden-modal-content{background:#fff;border-radius:20px;padding:32px 28px;text-align:center;max-width:320px;width:85%;box-shadow:0 16px 48px #00000040;border:2px solid #EF4444}.forbidden-icon{font-size:48px;margin-bottom:12px}.forbidden-modal-content h3{margin:0 0 12px;font-size:1.4rem;color:#dc2626;font-weight:700}.forbidden-modal-content p{margin:0 0 8px;font-size:.95rem;color:#374151;line-height:1.5}.forbidden-sub{font-size:.85rem!important;color:#059669!important;font-weight:600}.tutorial-error-modal{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:4002;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.error-modal-content{background:#fff;border-radius:20px;padding:32px 28px;text-align:center;max-width:320px;width:85%;box-shadow:0 16px 48px #00000040;border:2px solid #EF4444}.error-icon{font-size:48px;margin-bottom:12px}.error-modal-content h3{margin:0 0 12px;font-size:1.4rem;color:#dc2626;font-weight:700}.error-modal-content p{margin:0 0 8px;font-size:.95rem;color:#374151;line-height:1.5}.error-sub{font-size:.85rem!important;color:#6b7280!important;font-weight:500}.tutorial-completion-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:4000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.completion-card{background:#fff;border-radius:24px;padding:40px 36px;text-align:center;max-width:380px;width:90%;box-shadow:0 20px 60px #00000040}.completion-icon{margin-bottom:16px}.completion-card h2{margin:0 0 10px;font-size:1.6rem;color:#134e4a;font-weight:700}.completion-card p{margin:0 0 24px;font-size:.95rem;color:#6b7280;line-height:1.5}.completion-buttons{display:flex;gap:14px;justify-content:center}.completion-btn{padding:12px 28px;border:none;border-radius:25px;font-size:15px;font-weight:600;cursor:pointer;transition:all .3s ease}.completion-btn.retry{background:#f3f4f6;color:#374151;border:1px solid #E5E7EB}.completion-btn.retry:hover{background:#e5e7eb}.completion-btn.next{background:linear-gradient(135deg,#14b8a6,#0d9488);color:#fff;box-shadow:0 4px 16px #14b8a659}.completion-btn.next:hover{transform:translateY(-2px);box-shadow:0 6px 24px #14b8a673}@media(max-width:768px){.tutorial-board-header{padding:10px 12px;gap:8px}.tutorial-board-task-info .task-label{font-size:.85rem}.tutorial-board-task-info .task-desc{font-size:.72rem}.tutorial-board-back,.tutorial-reset-btn,.tutorial-hint-btn{padding:6px 10px;font-size:12px}.current-turn-indicator{padding:8px 14px;font-size:13px}.completion-card{padding:30px 24px}}.tutorial-page{position:fixed;inset:0;min-height:100vh;background:linear-gradient(135deg,#f0fdfa,#ccfbf1,#99f6e4);display:flex;flex-direction:column;z-index:3000;overflow-y:auto}.tutorial-cat-decorations{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}.tutorial-cat-bg{position:absolute;opacity:.07}.tutorial-cat-bg-top-left{top:6%;left:3%;transform:rotate(-15deg)}.tutorial-cat-bg-top-right{top:8%;right:4%;transform:rotate(20deg)}.tutorial-cat-bg-bottom-left{bottom:8%;left:6%;transform:rotate(-8deg)}.tutorial-cat-bg-bottom-right{bottom:12%;right:8%;transform:rotate(15deg)}.tutorial-header{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;background:linear-gradient(135deg,#14b8a6,#0d9488);box-shadow:0 4px 16px #0d94884d;position:relative;z-index:1}.tutorial-back-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:#0d94888c;color:#fff;border:2px solid rgba(255,255,255,.35);border-radius:25px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);flex-shrink:0}.tutorial-back-btn svg{width:20px;height:20px}.tutorial-back-btn:hover{background:#0d9488b3;border-color:#ffffff8c;transform:translate(-3px);box-shadow:0 4px 15px #00000026}.tutorial-header h1{margin:0;font-size:1.8rem;color:#134e4a;font-weight:700}.tutorial-header-right,.tutorial-progress-bar{display:flex;align-items:center;gap:12px}.progress-track{width:160px;height:8px;background:#fff3;border-radius:4px;overflow:hidden;box-shadow:inset 0 1px 2px #0003}.progress-fill-bar{height:100%;background:linear-gradient(90deg,#2dd4bf,#14b8a6);border-radius:4px;transition:width .5s ease;box-shadow:0 0 8px #2dd4bf66}.progress-text{font-size:14px;color:#fff;font-weight:700;min-width:50px;text-shadow:0 1px 3px rgba(0,0,0,.3)}.tutorial-content{flex:1;padding:30px;max-width:860px;margin:0 auto;width:100%;position:relative;z-index:1}.tutorial-intro{display:flex;align-items:center;gap:20px;padding:24px 30px;background:#fff;border-radius:20px;margin-bottom:28px;box-shadow:0 4px 16px #14b8a61a;border:2px solid rgba(20,184,166,.1)}.tutorial-intro .intro-text h2{margin:0 0 6px;font-size:1.3rem;color:#0f766e;font-weight:700}.tutorial-intro .intro-text p{margin:0;color:#5e8a86;font-size:.95rem}.module-list{display:flex;flex-direction:column;gap:18px}.module-card{background:#fff;border-radius:20px;padding:24px 28px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 16px #14b8a614;border:2px solid transparent}.module-card:hover{transform:translateY(-3px);box-shadow:0 10px 30px #14b8a62e;border-color:#14b8a640}.module-card.all-done{background:linear-gradient(135deg,#f0fdfa,#ecfdf5);border-color:#10b98140}.module-card-header{display:flex;align-items:center;gap:16px;margin-bottom:16px}.module-icon-wrapper{width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,#14b8a6,#0d9488);display:flex;align-items:center;justify-content:center;flex-shrink:0}.module-card-title{flex:1}.module-card-title h3{margin:0 0 4px;font-size:1.15rem;color:#134e4a;font-weight:700}.module-card-title p{margin:0;font-size:.85rem;color:#5e8a86}.module-star-badge{flex-shrink:0}.module-card-progress{display:flex;align-items:center;gap:12px;margin-bottom:14px}.module-progress-track{flex:1;height:6px;background:#e5e7eb;border-radius:3px;overflow:hidden}.module-progress-fill{height:100%;background:linear-gradient(90deg,#14b8a6,#0d9488);border-radius:3px;transition:width .5s ease}.module-progress-num{font-size:13px;color:#6b7280;font-weight:600;min-width:36px;text-align:right}.module-card-levels{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}.mini-level-dot{width:30px;height:30px;border-radius:8px;background:#f3f4f6;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#9ca3af;transition:all .3s ease}.mini-level-dot.done{background:#d1fae5}.module-card-enter{display:flex;align-items:center;justify-content:flex-end;gap:6px;font-size:14px;font-weight:600;color:#14b8a6}.module-card:hover .module-card-enter{color:#0d9488}.module-detail-header{margin-bottom:20px}.module-back-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;background:#fff;color:#14b8a6;border:2px solid rgba(20,184,166,.2);border-radius:25px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease;margin-bottom:20px}.module-back-btn:hover{background:#14b8a60d;border-color:#14b8a666;transform:translate(-3px)}.module-detail-title-row{display:flex;align-items:center;gap:16px;padding:20px 24px;background:#fff;border-radius:16px;box-shadow:0 2px 12px #14b8a614}.module-detail-icon{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#14b8a6,#0d9488);display:flex;align-items:center;justify-content:center;flex-shrink:0}.module-detail-title-row h2{margin:0 0 4px;font-size:1.25rem;color:#134e4a;font-weight:700}.module-detail-subtitle{margin:0;font-size:.85rem;color:#5e8a86}.level-list{display:flex;flex-direction:column;gap:12px}.level-item{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;background:#ffffffd9;border:2px solid rgba(20,184,166,.12);border-radius:16px;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}.level-item:before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:linear-gradient(180deg,#14b8a6,#0d9488);border-radius:0 2px 2px 0}.level-item:hover:not(.locked){transform:translateY(-2px) translate(3px);box-shadow:0 6px 20px #14b8a62e;border-color:#14b8a64d;background:#fffffff2}.level-item.completed{background:#f0fdfaf2;border-color:#10b98140}.level-item.completed:before{background:linear-gradient(180deg,#10b981,#059669)}.level-item.locked{opacity:.6;cursor:not-allowed}.level-item.locked:before{background:#d1d5db}.level-item-left{display:flex;align-items:center;gap:16px;flex:1}.level-number-badge{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#14b8a6,#0d9488);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#fff;flex-shrink:0}.level-item.completed .level-number-badge{background:linear-gradient(135deg,#10b981,#059669)}.level-item.locked .level-number-badge{background:#d1d5db}.level-item-info{display:flex;flex-direction:column;gap:4px}.level-item-title{font-size:1rem;color:#134e4a;font-weight:600}.level-item-desc{font-size:.8rem;color:#6b7280}.level-item-right{display:flex;align-items:center;gap:10px;flex-shrink:0}.level-star{display:flex;align-items:center}.level-arrow{color:#14b8a6}.level-item:hover:not(.locked) .level-arrow{transform:translate(3px);transition:transform .2s ease}.tutorial-board-wrapper{display:flex;justify-content:center;align-items:flex-start;padding:10px 0}.tutorial-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px;gap:20px}.tutorial-loading-spinner{width:48px;height:48px;border:4px solid rgba(20,184,166,.15);border-top-color:#14b8a6;border-radius:50%;animation:tutorial-spin .8s linear infinite}@keyframes tutorial-spin{to{transform:rotate(360deg)}}.tutorial-loading p{font-size:1rem;color:#0f766e;font-weight:500}@media(max-width:768px){.tutorial-header{padding:10px 16px;flex-wrap:wrap;gap:10px}.tutorial-header h1{font-size:1.1rem;order:-1;width:100%;text-align:center}.tutorial-content{padding:16px}.tutorial-intro{flex-direction:column;text-align:center;padding:20px}.module-card{padding:18px 20px}.module-card-title h3{font-size:1rem}.progress-track{width:100px}.tutorial-progress-bar,.tutorial-header-right{justify-content:flex-end}.level-item{padding:14px 16px}.level-item-title{font-size:.9rem}.level-number-badge{width:34px;height:34px;font-size:13px}}.create-room-modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:10000}.create-room-modal{background:#fff;border-radius:12px;padding:24px;width:320px;max-width:90vw;box-shadow:0 8px 24px #0003}.create-room-modal h3{margin:0 0 16px;font-size:18px;text-align:center}.create-room-modal .form-section{margin-bottom:16px}.create-room-modal .form-label{font-size:14px;color:#555;margin-bottom:8px;display:block}.create-room-modal .option-row{display:flex;gap:8px;flex-wrap:wrap}.create-room-modal .option-btn{flex:1 1 auto;min-width:56px;padding:8px 12px;border:1px solid #ddd;border-radius:6px;background:#fafafa;cursor:pointer;font-size:14px}.create-room-modal .option-btn.active{background:#4a90e2;color:#fff;border-color:#4a90e2}.create-room-modal .timer-toggle{display:flex;align-items:center;gap:8px;margin-bottom:12px;cursor:pointer}.create-room-modal .timer-options[hidden]{display:none}.create-room-modal .modal-actions{display:flex;gap:12px;margin-top:20px}.create-room-modal .modal-actions button{flex:1;padding:10px;border:none;border-radius:6px;font-size:15px;cursor:pointer}.create-room-modal .cancel-btn{background:#eee;color:#333}.create-room-modal .confirm-btn{background:#4a90e2;color:#fff}.modal-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:var(--z-modal);font-family:var(--font-family-base)}.modal-content{background-color:#fff;padding:24px;border-radius:8px;box-shadow:0 4px 12px #00000026;max-width:400px;width:100%;text-align:center}.modal-content h3{margin-top:0;margin-bottom:16px;color:#333;font-size:20px}.modal-content p{margin-bottom:24px;color:#666;font-size:16px;line-height:1.5}.modal-buttons{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.modal-button{padding:10px 20px;border:none;border-radius:4px;font-size:14px;font-weight:600;cursor:pointer;transition:transform .2s ease,opacity .2s ease,background-color .2s ease,color .2s ease,box-shadow .2s ease,border-color .2s ease;min-width:100px}.modal-button:hover{transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}.keep-button{background-color:#52c41a;color:#fff}.keep-button:hover{background-color:#389e0d}.reset-button{background-color:#faad14;color:#fff}.reset-button:hover{background-color:#d48806}.cancel-button{background-color:#f5f5f5;color:#333;border:1px solid #d9d9d9}.cancel-button:hover{background-color:#e8e8e8}.modal-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:var(--z-modal)}.modal-content{background-color:#fff;border-radius:8px;box-shadow:0 4px 20px #0003;padding:2rem;max-width:400px;width:100%;text-align:center}.color-select-modal{display:flex;flex-direction:column;gap:1.5rem}.color-select-modal h3{font-size:1.5rem;color:#2c3e50;margin:0;font-weight:600}.color-select-modal p{color:#6c757d;font-size:1rem;margin:0}.color-options{display:flex;gap:1rem;justify-content:center;margin:1rem 0}.color-option{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1.5rem;border:2px solid #e9ecef;border-radius:8px;background-color:#f8f9fa;cursor:pointer;transition:transform .2s ease-in-out,opacity .2s ease-in-out,background-color .2s ease-in-out,color .2s ease-in-out,box-shadow .2s ease-in-out,border-color .2s ease-in-out;flex:1;max-width:150px}.color-option:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026;border-color:#007bff}.color-option.black:hover{border-color:#2c3e50;background-color:#f0f0f0}.color-option.white:hover{border-color:#6c757d;background-color:#fafafa}.color-option:active{transform:translateY(0);box-shadow:0 2px 8px #0000001a}.color-demo{width:50px;height:50px;border-radius:50%;margin-bottom:.5rem;display:flex;justify-content:center;align-items:center;font-size:1.5rem}.black-demo{background-color:#2c3e50;color:#fff}.white-demo{background-color:#fff;border:2px solid #2c3e50;color:#2c3e50}.color-option span{font-size:1.1rem;font-weight:600;color:#2c3e50}.color-option small{font-size:.8rem;color:#6c757d;font-weight:400}.modal-buttons{display:flex;gap:1rem;justify-content:center;margin-top:1rem}.modal-button{padding:.75rem 1.5rem;border:none;border-radius:4px;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .2s ease-in-out,opacity .2s ease-in-out,background-color .2s ease-in-out,color .2s ease-in-out,box-shadow .2s ease-in-out,border-color .2s ease-in-out;min-width:100px}.cancel-button{background-color:#6c757d;color:#fff}.cancel-button:hover{background-color:#5a6268;transform:translateY(-1px);box-shadow:0 4px 8px #6c757d33}.cancel-button:active{transform:translateY(0);box-shadow:0 2px 4px #6c757d33}@media(max-width:576px){.modal-content{margin:1rem;padding:1.5rem}.color-options{flex-direction:column;align-items:center}.color-option{max-width:100%;width:200px}.modal-buttons{flex-direction:column}.modal-button{width:100%}}.tutorial-container{display:flex;flex-direction:column;min-height:100vh;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);font-family:YouYuan,幼圆,Microsoft YaHei,sans-serif}.tutorial-container .tutorial-header{display:flex;align-items:center;padding:1.5rem 1.2rem;background:#fff;box-shadow:0 4px 20px #00000014;border-radius:0 0 30px 30px;margin-bottom:1.5rem;position:relative;overflow:hidden}.tutorial-container .tutorial-header:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#4facfe,#00f2fe)}.tutorial-container .tutorial-header h2{margin:0;color:#2c3e50;font-size:1.4rem;font-weight:700;flex:1;text-align:center;letter-spacing:.5px}.back-btn{background:linear-gradient(135deg,#f0f4f8,#e9ecef);border:none;font-size:1.5rem;color:#495057;cursor:pointer;padding:.75rem 1rem;border-radius:16px;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1),background-color .3s cubic-bezier(.4,0,.2,1),color .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1),border-color .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #00000014;position:relative;z-index:1}.back-btn:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#e9ecef,#dee2e6);border-radius:16px;opacity:0;transition:opacity .3s ease;z-index:-1}.back-btn:hover{transform:translate(-4px) scale(1.05);box-shadow:0 4px 12px #0000001f}.back-btn:hover:before{opacity:1}.back-btn:active{transform:translate(-2px) scale(.98);box-shadow:0 1px 4px #0000001a}.tutorial-main-content{flex:1;display:flex;flex-direction:column;padding:0 1.2rem 1.5rem}.tutorial-step-header{background:#fff;border-radius:20px;padding:1.5rem;margin-bottom:1.5rem;box-shadow:0 4px 20px #00000014;text-align:center}.tutorial-step-header h2{margin:0;color:#2c3e50;font-size:1.4rem;font-weight:700}.tutorial-step-content{background:#fff;border-radius:20px;padding:2rem;margin-bottom:1.5rem;box-shadow:0 4px 20px #00000014;color:#495057;line-height:1.7}.tutorial-step-content h3{margin-top:1.5rem;margin-bottom:1rem;color:#2c3e50;font-size:1.2rem;font-weight:700;border-bottom:3px solid #4facfe;padding-bottom:.5rem}.tutorial-step-content p{margin-bottom:1rem;font-size:1rem}.tutorial-step-content ul{margin-bottom:1.5rem;padding-left:1.5rem}.tutorial-step-content li{margin-bottom:.5rem}.tutorial-step-footer{background:#fff;border-radius:20px;padding:1.5rem;box-shadow:0 4px 20px #00000014}.tutorial-content-wrapper{flex:1;padding:0 1.2rem;display:flex;justify-content:center;align-items:center}.tutorial-overlay{position:fixed;inset:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:var(--z-max);overflow:hidden}@media(max-width:768px){.tutorial-overlay{position:absolute;width:100%;height:100%}}.tutorial-modal{background:#fff;border-radius:24px;width:90%;max-width:850px;max-height:60vh;overflow:hidden;box-shadow:0 12px 48px #00000026;display:flex;flex-direction:column;transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .4s cubic-bezier(.4,0,.2,1),background-color .4s cubic-bezier(.4,0,.2,1),color .4s cubic-bezier(.4,0,.2,1),box-shadow .4s cubic-bezier(.4,0,.2,1),border-color .4s cubic-bezier(.4,0,.2,1);position:relative;animation:fadeInUp .6s cubic-bezier(.4,0,.2,1) forwards}.tutorial-modal:before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,#4facfe,#00f2fe)}.tutorial-modal .tutorial-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid #f0f0f0;background:#f8f9fa;border-radius:0;margin-bottom:0;box-shadow:none;position:relative}.tutorial-modal .tutorial-header:before{display:none}.tutorial-modal .tutorial-header h2{margin:0;color:#2c3e50;font-size:1.3rem;font-weight:700;flex:1;text-align:left;letter-spacing:.5px}.tutorial-close-btn{background:linear-gradient(135deg,#f0f4f8,#e9ecef);border:none;font-size:1.3rem;cursor:pointer;color:#495057;width:44px;height:44px;display:flex;justify-content:center;align-items:center;border-radius:12px;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1),background-color .3s cubic-bezier(.4,0,.2,1),color .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1),border-color .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #00000014}.tutorial-close-btn:hover{transform:scale(1.1);box-shadow:0 4px 12px #0000001f;background:linear-gradient(135deg,#e9ecef,#dee2e6)}.tutorial-close-btn:active{transform:scale(.95);box-shadow:0 1px 4px #0000001a}.tutorial-modal .tutorial-content{padding:2rem;color:#495057;line-height:1.7;flex:1;display:block;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#ced4da #f8f9fa}.tutorial-modal .tutorial-content::-webkit-scrollbar{width:6px}.tutorial-modal .tutorial-content::-webkit-scrollbar-track{background:#f8f9fa;border-radius:3px}.tutorial-modal .tutorial-content::-webkit-scrollbar-thumb{background:#ced4da;border-radius:3px}.tutorial-modal .tutorial-content::-webkit-scrollbar-thumb:hover{background:#adb5bd}.tutorial-modal .tutorial-content h3{margin-top:2rem;margin-bottom:1.2rem;color:#2c3e50;font-size:1.2rem;font-weight:700;border-bottom:3px solid #4facfe;padding-bottom:.75rem;letter-spacing:.5px}.tutorial-modal .tutorial-content p{margin-bottom:1.2rem;font-size:1rem;color:#495057}.tutorial-modal .tutorial-content ul{margin-bottom:2rem;padding-left:1.75rem}.tutorial-modal .tutorial-content li{margin-bottom:.85rem;font-size:1rem;color:#495057;position:relative}.tutorial-modal .tutorial-content li:before{content:"•";color:#4facfe;font-weight:700;position:absolute;left:-1.2rem}.tutorial-modal .tutorial-content strong{color:#2c3e50;font-weight:700}.tutorial-image-container{display:flex;justify-content:center;margin:2rem 0;padding:1.5rem;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:20px;border:1px solid #f0f0f0;box-shadow:0 4px 16px #00000014;transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease}.tutorial-image-container:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0000001f}.tutorial-svg{max-width:100%;height:auto;box-shadow:0 6px 24px #0000001f;border-radius:12px;transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .4s cubic-bezier(.4,0,.2,1),background-color .4s cubic-bezier(.4,0,.2,1),color .4s cubic-bezier(.4,0,.2,1),box-shadow .4s cubic-bezier(.4,0,.2,1),border-color .4s cubic-bezier(.4,0,.2,1);background:#fff;padding:1rem}.tutorial-svg:hover{transform:scale(1.03);box-shadow:0 8px 32px #00000029}.tutorial-footer{padding:1.5rem;border-top:1px solid #f0f0f0;background:#f8f9fa;border-radius:0 0 24px 24px;display:flex;flex-direction:column;gap:1.5rem;position:relative}.tutorial-footer:before{content:"";position:absolute;top:0;left:1.5rem;right:1.5rem;height:1px;background:linear-gradient(90deg,transparent 0%,#e0e0e0 50%,transparent 100%)}.tutorial-progress{display:flex;justify-content:center;gap:1rem;padding:.5rem 0}.progress-dot{width:14px;height:14px;border-radius:50%;background-color:#e0e0e0;transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .4s cubic-bezier(.4,0,.2,1),background-color .4s cubic-bezier(.4,0,.2,1),color .4s cubic-bezier(.4,0,.2,1),box-shadow .4s cubic-bezier(.4,0,.2,1),border-color .4s cubic-bezier(.4,0,.2,1);position:relative}.progress-dot:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:6px;height:6px;border-radius:50%;background-color:#fff;opacity:0;transition:opacity .3s ease}.progress-dot.active{background-color:#4facfe;transform:scale(1.4);box-shadow:0 0 0 6px #4facfe33}.progress-dot.active:before{opacity:1}.tutorial-buttons{display:flex;justify-content:space-between;gap:1.2rem}.tutorial-btn{padding:1rem 2rem;border:2px solid #4facfe;background:#fff;color:#4facfe;border-radius:16px;cursor:pointer;font-size:1.1rem;font-weight:600;transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .4s cubic-bezier(.4,0,.2,1),background-color .4s cubic-bezier(.4,0,.2,1),color .4s cubic-bezier(.4,0,.2,1),box-shadow .4s cubic-bezier(.4,0,.2,1),border-color .4s cubic-bezier(.4,0,.2,1);flex:1;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px #00000014;position:relative;overflow:hidden}.tutorial-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(79,172,254,.1) 50%,transparent 100%);transition:left .6s ease}.tutorial-btn:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 6px 24px #4facfe40;border-color:#3a86ff}.tutorial-btn:hover:not(:disabled):before{left:100%}.tutorial-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}.tutorial-btn.primary{background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff;border-color:#4facfe}.tutorial-btn.primary:hover{background:linear-gradient(135deg,#3a86ff,#0ea5e9);border-color:#3a86ff;box-shadow:0 6px 24px #4facfe59}.tutorial-btn:active{transform:translateY(0);box-shadow:0 2px 8px #0000001a}.customer-service{background:#fff;border-radius:24px;padding:2rem;margin:1.5rem;box-shadow:0 6px 24px #0000001a;transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .4s cubic-bezier(.4,0,.2,1),background-color .4s cubic-bezier(.4,0,.2,1),color .4s cubic-bezier(.4,0,.2,1),box-shadow .4s cubic-bezier(.4,0,.2,1),border-color .4s cubic-bezier(.4,0,.2,1);text-align:center;position:relative;overflow:hidden;flex-shrink:0}.customer-service:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#4facfe,#00f2fe)}.customer-service:hover{transform:translateY(-4px);box-shadow:0 8px 32px #0000001f}.customer-service h3{font-size:1.3rem;font-weight:700;color:#2c3e50;margin-bottom:1.2rem;border-bottom:none;padding-bottom:0}.customer-service p{font-size:1rem;line-height:1.6;color:#495057;margin-bottom:1.8rem}.wechat-contact{display:flex;align-items:center;justify-content:center;gap:1rem;padding:1.2rem;background:linear-gradient(135deg,#4facfe1a,#00f2fe1a);border-radius:16px;border:1px solid rgba(79,172,254,.2);transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .4s cubic-bezier(.4,0,.2,1),background-color .4s cubic-bezier(.4,0,.2,1),color .4s cubic-bezier(.4,0,.2,1),box-shadow .4s cubic-bezier(.4,0,.2,1),border-color .4s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 16px #00000014}.wechat-contact:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0000001f;background:linear-gradient(135deg,#4facfe26,#00f2fe26)}.wechat-label{font-size:1rem;font-weight:600;color:#2c3e50}.wechat-number{font-size:1.1rem;font-weight:700;color:#4facfe;background:#fff;padding:.75rem 1.5rem;border-radius:12px;box-shadow:0 4px 12px #0000001a;transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .4s cubic-bezier(.4,0,.2,1),background-color .4s cubic-bezier(.4,0,.2,1),color .4s cubic-bezier(.4,0,.2,1),box-shadow .4s cubic-bezier(.4,0,.2,1),border-color .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.wechat-number:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(79,172,254,.1) 50%,transparent 100%);transition:left .6s ease}.wechat-number:hover{transform:scale(1.05);box-shadow:0 6px 20px #4facfe40}.wechat-number:hover:before{left:100%}@media(max-width:768px){.tutorial-container .tutorial-header{padding:1.2rem 1rem;border-radius:0 0 24px 24px}.tutorial-container .tutorial-header h2{font-size:1.25rem}.back-btn{padding:.6rem .8rem;font-size:1.3rem}.tutorial-content-wrapper{padding:0 .75rem}.tutorial-modal{width:95%;margin:0;max-height:55vh;border-radius:20px}.tutorial-modal .tutorial-header{padding:1.2rem}.tutorial-modal .tutorial-header h2{font-size:1.15rem}.tutorial-modal .tutorial-content{padding:1.5rem;line-height:1.6}.tutorial-modal .tutorial-content h3{font-size:1.1rem;margin-top:1.5rem;margin-bottom:1rem}.tutorial-content p,.tutorial-content li{font-size:.95rem}.tutorial-footer{padding:1.2rem;gap:1.2rem}.tutorial-buttons{flex-direction:column;gap:1rem}.tutorial-btn{width:100%;padding:1rem 1.5rem;font-size:1rem}.tutorial-image-container{padding:1.2rem;margin:1.5rem 0;border-radius:16px}.tutorial-svg{padding:.75rem;border-radius:8px}.customer-service{margin:1rem;padding:1.5rem;border-radius:20px;flex-shrink:0}.customer-service h3{font-size:1.15rem}.customer-service p{font-size:.9rem}.wechat-contact{flex-direction:column;gap:.75rem;text-align:center;padding:1rem;border-radius:12px}.wechat-number{font-size:1rem;padding:.6rem 1.2rem}.tutorial-progress{gap:.75rem}.progress-dot{width:12px;height:12px}.progress-dot.active{transform:scale(1.3)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.tutorial-modal .tutorial-header{animation:slideInLeft .5s cubic-bezier(.4,0,.2,1) forwards}.tutorial-modal .tutorial-content{animation:fadeInUp .7s cubic-bezier(.4,0,.2,1) forwards;animation-delay:.2s}.tutorial-footer{animation:fadeInUp .8s cubic-bezier(.4,0,.2,1) forwards;animation-delay:.4s}.customer-service{animation:fadeInUp .9s cubic-bezier(.4,0,.2,1) forwards;animation-delay:.6s}.progress-dot.active{animation:pulse 2s infinite}@media(hover:none)and (pointer:coarse){.back-btn:active{background:linear-gradient(135deg,#e9ecef,#dee2e6);transform:translate(-4px) scale(.95)}.tutorial-btn:active,.tutorial-btn.primary:active{transform:scale(.96)}.wechat-contact:active{transform:scale(.98)}.wechat-number:active{transform:scale(1.02)}.tutorial-close-btn:active{transform:scale(.95)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tutorial-modal .tutorial-content{transition:transform .4s ease,opacity .4s ease,background-color .4s ease,color .4s ease,box-shadow .4s ease,border-color .4s ease}.tutorial-modal .tutorial-content[data-step-changing]{opacity:0;transform:translateY(20px)}@media(prefers-color-scheme:dark){.tutorial-container{background:linear-gradient(135deg,#1a1a2e,#16213e)}.tutorial-container .tutorial-header{background:#1a1a2e;box-shadow:0 4px 20px #0000004d}.tutorial-container .tutorial-header h2{color:#e9ecef}.back-btn{background:linear-gradient(135deg,#2c3e50,#34495e);color:#e9ecef}.tutorial-modal{background:#1a1a2e;box-shadow:0 12px 48px #0006}.tutorial-modal .tutorial-header{background:#2c3e50}.tutorial-modal .tutorial-header h2{color:#e9ecef}.tutorial-modal .tutorial-content{color:#e9ecef;background:#1a1a2e}.tutorial-modal .tutorial-content h3{color:#e9ecef;border-bottom-color:#4facfe}.tutorial-content p,.tutorial-content li{color:#e9ecef}.tutorial-footer{background:#2c3e50}.customer-service{background:#1a1a2e;box-shadow:0 6px 24px #0000004d}.customer-service h3,.customer-service p{color:#e9ecef}}.fusion-toggle{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border:1px solid #d1d5db;border-radius:6px;background:#f9fafb;color:#374151;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.fusion-toggle:hover{background:#f3f4f6;border-color:#9ca3af}.fusion-toggle:active{transform:scale(.96)}.fusion-toggle.fusion-enabled{background:#eff6ff;border-color:#93c5fd;color:#1d4ed8}.fusion-toggle.fusion-enabled:hover{background:#dbeafe;border-color:#60a5fa}.fusion-toggle.fusion-disabled{background:#f9fafb;border-color:#d1d5db;color:#6b7280}.fusion-toggle.fusion-disabled:hover{background:#f3f4f6;border-color:#9ca3af}.fusion-toggle-icon{font-size:14px;line-height:1}.fusion-toggle-text{font-size:12px}.dark .fusion-toggle{background:#1f2937;border-color:#4b5563;color:#d1d5db}.dark .fusion-toggle:hover{background:#374151;border-color:#6b7280}.dark .fusion-toggle.fusion-enabled{background:#1e3a5f;border-color:#3b82f6;color:#93c5fd}.dark .fusion-toggle.fusion-enabled:hover{background:#1e40af;border-color:#60a5fa}.dark .fusion-toggle.fusion-disabled{background:#1f2937;border-color:#4b5563;color:#9ca3af}.dark .fusion-toggle.fusion-disabled:hover{background:#374151;border-color:#6b7280}.online-game-layout{width:100vw;height:100vh;overflow:hidden;background-color:#f8fff8}.online-game-desktop{display:flex;flex-direction:row;height:100%;width:100%}.online-game-main{flex:1;display:flex;flex-direction:column;height:100%;overflow:hidden;min-width:0;position:relative}.online-game-header-compact{display:flex;align-items:center;padding:.5rem 1rem;gap:.5rem;background-color:#1a1a2ee6;color:#fff;border-bottom:1px solid rgba(78,205,196,.2);flex-shrink:0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow:hidden}.header-leave-btn{background:none;border:none;color:#fff;font-size:.9rem;cursor:pointer;padding:.3rem .6rem;border-radius:6px;transition:background .2s;flex-shrink:0}.header-leave-btn:hover{background:#ffffff1a}.header-title{flex:1;font-size:1.2rem;font-weight:700;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;text-align:center}.online-header-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.header-confirm-toggle{background:#ffffff1a;border:1px solid rgba(78,205,196,.3);color:#ffffffb3;font-size:.75rem;padding:.3rem .6rem;border-radius:6px;cursor:pointer;transition:all .2s;white-space:nowrap}.header-confirm-toggle.enabled{background:#4ecdc433;border-color:#4ecdc480;color:#4ecdc4}.online-board-area{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:0}.online-game-layout:not(.game-started) .board-with-controls canvas{pointer-events:none}.online-game-mobile{display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden;max-height:100vh;max-height:100dvh}.online-game-mobile .online-board-area{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:0;padding:2px 0}.online-game-mobile .board-with-controls{max-width:100vw;gap:2px}.online-game-mobile .inline-sidebar{gap:2px;padding:2px}.online-game-mobile .inline-sidebar-btn{padding:3px 4px;min-height:32px}.online-game-mobile .online-player-strip{padding:.1rem .3rem;font-size:.65rem;min-height:24px;flex-shrink:0}.online-game-mobile .strip-main{gap:.15rem}.online-game-mobile .strip-captures{font-size:.6rem}.online-game-mobile .turn-badge{font-size:.55rem;padding:.06rem .2rem}.online-game-mobile .mobile-header-actions{padding:.1rem .3rem;gap:.2rem;flex-shrink:0;min-height:28px}.online-game-mobile .mobile-header-actions .mobile-action-btn{padding:.15rem .35rem;font-size:.65rem;min-height:24px}.mobile-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:.4rem;padding:.15rem .6rem;background-color:#1a1a2ed9;flex-shrink:0;overflow:hidden}.mobile-confirm-toggle{background:#ffffff14;border:1px solid rgba(78,205,196,.25);color:#ffffffa6;font-size:.65rem;padding:.15rem .35rem;border-radius:4px;cursor:pointer;white-space:nowrap;transition:all .2s}.mobile-confirm-toggle.enabled{background:#4ecdc426;border-color:#4ecdc466;color:#4ecdc4}.online-player-strip{display:flex;align-items:center;gap:.3rem;padding:.25rem .6rem;color:#fff;flex-shrink:0;font-size:.8rem;background-color:#1a1a2e;line-height:1.3}.online-player-strip.opponent{border-bottom:1px solid rgba(255,107,107,.3)}.online-player-strip.self{border-top:1px solid rgba(78,205,196,.3)}.strip-main{display:flex;align-items:center;gap:.3rem;min-width:0;overflow:hidden}.strip-color{font-size:.85rem;flex-shrink:0;line-height:1}.strip-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strip-captures{color:#ffffff80;font-size:.7rem;flex-shrink:0}.strip-status{margin-left:auto;flex-shrink:0}.turn-badge{font-size:.7rem;font-weight:700;padding:.12rem .35rem;border-radius:4px}.turn-badge.opponent-turn{color:#ff6b6b;background:#ff6b6b26}.turn-badge.self-turn{color:#4ecdc4;background:#4ecdc426}.mobile-action-bar{display:flex;gap:1px;background-color:#1a1a2e;padding:.5rem;flex-shrink:0;border-top:1px solid rgba(78,205,196,.1)}.mobile-action-btn{flex:1;padding:.7rem;border:none;border-radius:4px;font-size:.85rem;font-weight:600;cursor:pointer;transition:opacity .2s}.mobile-action-btn.undo{background:#4ecdc426;color:#4ecdc4}.mobile-action-btn.resign{background:#ff6b6b26;color:#ff6b6b}.mobile-action-btn.disabled,.mobile-action-btn:disabled{opacity:.4;cursor:not-allowed}.mobile-room-info{background-color:#1a1a2e;color:#ffffff59;padding:.3rem 1rem;text-align:center;font-size:.7rem;flex-shrink:0;border-top:1px solid rgba(255,255,255,.05)}@supports (padding-bottom: env(safe-area-inset-bottom)){.mobile-room-info{padding-bottom:calc(.3rem + env(safe-area-inset-bottom))}}@media(max-width:1200px){.online-game-header-compact{padding:.4rem .6rem;gap:.3rem}.header-title{font-size:.9rem}.header-leave-btn{font-size:.8rem;padding:.2rem .4rem}.online-header-actions{gap:.3rem}.header-confirm-toggle{font-size:.65rem;padding:.2rem .4rem}}@media(max-width:1100px){.online-game-header-compact{padding:.3rem .5rem;gap:.2rem}.header-title{font-size:.8rem;max-width:30vw}.header-leave-btn{font-size:.75rem;padding:.15rem .3rem}.online-header-actions{gap:.2rem}.header-confirm-toggle{font-size:.6rem;padding:.15rem .3rem}}@media(max-width:640px){.online-player-strip{padding:.1rem .3rem;font-size:.65rem;min-height:24px}.strip-main{gap:.15rem}.strip-color{font-size:.7rem}.strip-captures{font-size:.6rem}.turn-badge{font-size:.55rem;padding:.08rem .2rem}}@media(max-width:480px){.online-player-strip{padding:.08rem .2rem;font-size:.6rem;min-height:20px}.strip-main{gap:.1rem}.strip-color{font-size:.65rem}.strip-captures{font-size:.55rem}.turn-badge{font-size:.5rem;padding:.06rem .15rem}}@media(max-width:375px){.online-player-strip{padding:.06rem .15rem;font-size:.55rem;min-height:18px}.strip-main{gap:.08rem}.strip-color{font-size:.6rem}.strip-captures{font-size:.5rem}.turn-badge{font-size:.45rem;padding:.05rem .12rem}}@media(max-width:480px){.mobile-header-actions{padding:.08rem .2rem;gap:.2rem;min-height:24px}.mobile-confirm-toggle{font-size:.55rem;padding:.1rem .2rem}.mobile-action-btn{padding:.5rem;font-size:.75rem}}@media(max-width:375px){.mobile-header-actions{padding:.06rem .15rem;gap:.15rem;min-height:22px}.mobile-confirm-toggle{font-size:.5rem;padding:.08rem .15rem}.mobile-action-btn{padding:.4rem;font-size:.7rem}}@media(max-width:640px){.mobile-ready-strip{padding:.4rem .6rem}.mobile-ready-player{font-size:.8rem}.mobile-room-code-value{font-size:.9rem}}@media(max-width:480px){.mobile-ready-strip{padding:.3rem .4rem}.mobile-ready-player{font-size:.75rem}.mobile-room-code-label{font-size:.7rem}.mobile-room-code-value{font-size:.85rem}.mobile-ready-badge{font-size:.65rem;padding:.15rem .3rem}.mobile-ready-stone{font-size:.85rem}}@media(max-width:375px){.mobile-ready-strip{padding:.25rem .3rem}.mobile-ready-player{font-size:.7rem}.mobile-room-code-value{font-size:.8rem}.mobile-ready-badge{font-size:.6rem;padding:.1rem .25rem}.mobile-ready-stone{font-size:.75rem}}.mobile-ready-strip{background-color:#1a1a2e;padding:.5rem 1rem;flex-shrink:0;border-bottom:1px solid rgba(78,205,196,.1)}.mobile-room-code-row{display:flex;align-items:center;gap:.4rem;margin-bottom:.4rem;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.mobile-room-code-label{font-size:.75rem;color:#fff6;flex-shrink:0}.mobile-room-code-value{font-size:1rem;font-weight:700;color:#4ecdc4;letter-spacing:.1em}.mobile-room-code-copy{font-size:.85rem;flex-shrink:0;opacity:.6;transition:opacity .2s}.mobile-room-code-row:hover .mobile-room-code-copy{opacity:1}.mobile-ready-player-left{display:flex;align-items:center;gap:.4rem;flex:1;min-width:0}.mobile-ready-stone{font-size:1rem;flex-shrink:0}.mobile-ready-players{display:flex;flex-direction:column;gap:.4rem}.mobile-ready-player{display:flex;align-items:center;justify-content:space-between;font-size:.85rem;color:#fff}.mobile-ready-name{font-weight:600}.mobile-ready-badge{font-size:.75rem;font-weight:700;padding:.2rem .5rem;border-radius:4px;background:#ffffff0f;color:#fff6}.mobile-ready-badge.ready{background:#4caf5026;color:#4caf50}.mobile-ready-actions{display:flex;gap:1px;background-color:#1a1a2e;padding:.5rem;flex-shrink:0;border-top:1px solid rgba(78,205,196,.1)}.mobile-ready-btn{flex:1;padding:.7rem;border:none;border-radius:4px;font-size:.85rem;font-weight:600;cursor:pointer;transition:opacity .2s}.mobile-ready-btn.ready{background:#4ecdc426;color:#4ecdc4}.mobile-ready-btn.unready{background:#ffc10726;color:#ffc107}.mobile-ready-btn.leave{background:#ffffff0f;color:#ffffffb3}.mobile-ready-btn:disabled{opacity:.4;cursor:not-allowed}.management-page{min-height:100vh;background:linear-gradient(135deg,#f0fdfa,#ccfbf1,#99f6e4);padding:16px;font-family:YouYuan,幼圆,Microsoft YaHei,sans-serif}.management-header-compact{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding:12px 20px;background:#ffffffd9;border-radius:12px;box-shadow:0 2px 8px #14b8a61a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.btn-back-compact{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:transparent;color:#0d9488;border:1.5px solid rgba(20,184,166,.3);border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.btn-back-compact:hover{background:#14b8a61a;border-color:#14b8a6}.header-title-group{display:flex;align-items:center;gap:10px}.header-title-group h1{font-size:1.4rem;color:#0d9488;margin:0;font-weight:700}.user-role-badge{padding:5px 14px;border-radius:20px;font-size:13px;font-weight:600}.user-role-badge.role-principal{background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff}.user-role-badge.role-teacher{background:linear-gradient(135deg,#06b6d4,#0891b2);color:#fff}.user-role-badge.role-student{background:linear-gradient(135deg,#14b8a6,#0d9488);color:#fff}.user-role-badge.role-user{background:linear-gradient(135deg,#9ca3af,#6b7280);color:#fff}.management-tabs-compact{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}.tab-btn-compact{padding:10px 20px;border:1.5px solid rgba(20,184,166,.2);border-radius:10px;background:#fff9;color:#134e4a;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.tab-btn-compact:hover{background:#14b8a61a;border-color:#14b8a666;transform:translateY(-1px)}.tab-btn-compact.active{background:linear-gradient(135deg,#14b8a6,#0d9488);color:#fff;border-color:transparent;box-shadow:0 4px 12px #14b8a64d}.management-content-compact{max-width:1200px;margin:0 auto}.management-section{background:#ffffffe6;border-radius:16px;padding:20px;box-shadow:0 4px 16px #14b8a61a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.section-header-compact{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:12px;border-bottom:1.5px solid rgba(20,184,166,.15);flex-wrap:wrap;gap:12px}.section-title-group{display:flex;align-items:center;gap:8px}.section-title-group h2{font-size:1.2rem;color:#0d9488;margin:0;font-weight:700}.count-badge{padding:3px 10px;background:#14b8a61a;color:#0d9488;border-radius:12px;font-size:12px;font-weight:600}.header-actions-compact{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.search-box{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#14b8a60d;border:1.5px solid rgba(20,184,166,.2);border-radius:8px;transition:all .2s ease}.search-box:focus-within{border-color:#14b8a6;background:#14b8a614}.search-box svg{color:#14b8a6;flex-shrink:0}.search-box input{border:none;background:transparent;font-size:13px;color:#134e4a;width:140px;outline:none;font-family:inherit}.search-box input::-moz-placeholder{color:#99a3a2}.search-box input::placeholder{color:#99a3a2}.btn-primary-compact{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:linear-gradient(135deg,#14b8a6,#0d9488);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s ease;font-family:inherit}.btn-primary-compact:hover{transform:translateY(-1px);box-shadow:0 4px 12px #14b8a666}.btn-primary-compact:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-secondary-compact{padding:8px 16px;background:#14b8a614;color:#0d9488;border:1.5px solid rgba(20,184,166,.25);border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s ease;font-family:inherit}.btn-secondary-compact:hover{background:#14b8a626}.filter-select-compact{padding:8px 12px;border:1.5px solid rgba(20,184,166,.2);border-radius:8px;font-size:13px;color:#134e4a;background:#fffc;cursor:pointer;transition:all .2s ease;font-family:inherit;outline:none}.filter-select-compact:focus{border-color:#14b8a6}.data-table{display:flex;flex-direction:column;gap:4px}.table-header{display:grid;grid-template-columns:2fr 1fr 2fr 120px;gap:12px;padding:10px 16px;background:#14b8a60f;border-radius:8px;font-size:12px;font-weight:700;color:#0d9488;text-transform:uppercase;letter-spacing:.5px}.table-row{display:grid;grid-template-columns:2fr 1fr 2fr 120px;gap:12px;padding:12px 16px;background:#fff9;border-radius:8px;align-items:center;transition:all .2s ease;border:1px solid transparent}.table-row:hover{background:#14b8a60a;border-color:#14b8a626}.col-name{display:flex;align-items:center;gap:10px}.user-avatar{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}.teacher-avatar{background:linear-gradient(135deg,#06b6d4,#0891b2)}.student-avatar{background:linear-gradient(135deg,#14b8a6,#0d9488)}.user-name{font-weight:600;color:#134e4a;font-size:14px}.col-id{font-size:13px;color:#6b7280;font-family:SF Mono,Monaco,monospace}.col-remark{font-size:13px;color:#6b7280;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.col-actions{display:flex;gap:6px;justify-content:flex-end}.btn-icon{width:30px;height:30px;border-radius:6px;border:none;background:#14b8a614;color:#0d9488;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;padding:0}.btn-icon:hover{background:#14b8a633;transform:translateY(-1px)}.btn-icon.btn-danger{background:#ef444414;color:#ef4444}.btn-icon.btn-danger:hover{background:#ef444433}.appointment-list{display:flex;flex-direction:column;gap:10px}.appointment-card{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:#ffffffb3;border-radius:10px;border:1px solid rgba(20,184,166,.1);transition:all .2s ease;gap:12px}.appointment-card:hover{background:#ffffffe6;border-color:#14b8a633;box-shadow:0 2px 8px #14b8a61a}.appointment-main{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.appointment-status-icon{width:32px;height:32px;border-radius:8px;background:#14b8a61a;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}.appointment-info{flex:1;min-width:0}.appointment-info h3{font-size:14px;color:#134e4a;margin:0 0 4px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.appointment-meta{display:flex;gap:12px;color:#6b7280;font-size:12px}.appointment-desc{color:#9ca3af;font-size:12px;margin:4px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.appointment-badge{flex-shrink:0}.appointment-actions{display:flex;gap:6px;flex-shrink:0}.btn-action-small{padding:5px 12px;border:none;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease;white-space:nowrap;font-family:inherit}.btn-action-small:hover{transform:translateY(-1px)}.btn-confirm{background:linear-gradient(135deg,#10b981,#059669);color:#fff}.btn-start{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff}.btn-complete{background:linear-gradient(135deg,#06b6d4,#0891b2);color:#fff}.btn-cancel{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff}.btn-pause{background:linear-gradient(135deg,#f97316,#ea580c);color:#fff}.btn-end{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}.status-badge{padding:3px 10px;border-radius:12px;font-size:11px;font-weight:600}.status-pending{background:#fef3c7;color:#92400e}.status-confirmed{background:#dbeafe;color:#1e40af}.status-ongoing{background:#d1fae5;color:#065f46}.status-completed{background:#ccfbf1;color:#115e59}.status-cancelled{background:#fee2e2;color:#991b1b}.status-active{background:#d1fae5;color:#065f46}.status-paused{background:#fef3c7;color:#92400e}.status-ended{background:#f3f4f6;color:#4b5563}.loading-container{display:flex;align-items:center;justify-content:center;padding:40px}.loading-cat{display:flex;flex-direction:column;align-items:center;gap:12px;color:#14b8a6;font-size:14px}.empty-state-compact{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;color:#9ca3af;gap:12px}.empty-state-compact p{font-size:14px;margin:0}.modal-overlay{position:fixed;inset:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:1000;padding:16px}.modal-content-compact{background:#fff;padding:24px;border-radius:16px;max-width:520px;width:100%;max-height:85vh;overflow-y:auto;box-shadow:0 20px 50px #0003}.modal-header{display:flex;align-items:center;gap:10px;margin-bottom:16px}.modal-header h2{font-size:1.2rem;color:#0d9488;margin:0;font-weight:700}.modal-hint{color:#6b7280;font-size:13px;margin:0 0 16px}.form-group-compact{margin-bottom:14px}.form-group-compact label{display:block;font-size:12px;font-weight:700;color:#374151;margin-bottom:5px;text-transform:uppercase;letter-spacing:.5px}.form-group-compact input,.form-group-compact textarea,.form-group-compact select{width:100%;padding:10px 12px;border:1.5px solid rgba(20,184,166,.2);border-radius:8px;font-size:13px;color:#134e4a;transition:all .2s ease;box-sizing:border-box;font-family:inherit;background:#fffc}.form-group-compact input:focus,.form-group-compact textarea:focus{outline:none;border-color:#14b8a6;box-shadow:0 0 0 3px #14b8a61a}.form-group-compact textarea{resize:vertical;min-height:60px}.form-row{margin-bottom:14px}.form-row.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}.select-container{position:relative}.dropdown-menu{position:absolute;top:100%;left:0;right:0;max-height:180px;overflow-y:auto;background:#fff;border:1.5px solid rgba(20,184,166,.2);border-top:none;border-radius:0 0 8px 8px;box-shadow:0 8px 20px #0000001a;z-index:10}.dropdown-item{padding:10px 12px;cursor:pointer;transition:background .15s ease;font-size:13px;color:#134e4a}.dropdown-item:hover{background:#14b8a614}.dropdown-hint{font-size:11px;color:#9ca3af;margin-left:6px}.modal-actions-compact{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;padding-top:16px;border-top:1px solid rgba(20,184,166,.1)}.assign-teacher-info{display:flex;align-items:center;gap:12px;padding:14px;background:linear-gradient(135deg,#f0fdfa,#ccfbf1);border-radius:10px;margin-bottom:16px}.teacher-avatar-compact{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,#14b8a6,#0d9488);display:flex;align-items:center;justify-content:center;font-size:20px}.teacher-details h3{margin:0 0 3px;font-size:15px;color:#134e4a;font-weight:600}.teacher-details p{margin:0;font-size:12px;color:#6b7280}.assign-textarea-compact{width:100%;padding:10px 12px;border:1.5px solid rgba(20,184,166,.2);border-radius:8px;font-family:SF Mono,Monaco,monospace;font-size:13px;line-height:1.5;resize:vertical;transition:all .2s ease;background:#fffc;box-sizing:border-box}.assign-textarea-compact:focus{outline:none;border-color:#14b8a6;box-shadow:0 0 0 3px #14b8a61a}.input-hint{margin:6px 0 0;font-size:11px;color:#9ca3af}.quick-select-section{margin-top:14px;padding-top:14px;border-top:1px solid rgba(20,184,166,.1)}.quick-select-section label{display:block;font-size:12px;font-weight:700;color:#374151;margin-bottom:10px}.student-chips{display:flex;flex-wrap:wrap;gap:6px}.student-chip{padding:5px 12px;background:#14b8a60f;border:1.5px solid transparent;border-radius:16px;font-size:12px;font-weight:500;color:#6b7280;cursor:pointer;transition:all .2s ease;font-family:inherit}.student-chip:hover{background:#14b8a61f;transform:translateY(-1px)}.student-chip.selected{background:linear-gradient(135deg,#14b8a6,#0d9488);color:#fff;border-color:#14b8a6}.operation-message{position:fixed;top:20px;right:20px;padding:12px 20px;border-radius:10px;font-size:14px;font-weight:600;z-index:10000;box-shadow:0 8px 25px #00000026;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.operation-message.success{background:linear-gradient(135deg,#d1fae5,#a7f3d0);color:#065f46;border:1px solid #A7F3D0}.operation-message.error{background:linear-gradient(135deg,#fee2e2,#fecaca);color:#991b1b;border:1px solid #FECACA}@media(max-width:1024px){.table-header,.table-row{grid-template-columns:1.5fr 1fr 1.5fr 100px}}@media(max-width:768px){.management-page{padding:8px}.management-header-compact{padding:10px 12px;flex-wrap:nowrap;gap:8px}.btn-back-compact{padding:6px 10px;font-size:12px}.btn-back-compact svg{width:16px;height:16px}.header-title-group{gap:6px}.header-title-group h1{font-size:1rem}.user-role-badge{padding:4px 10px;font-size:11px}.management-tabs-compact{gap:6px;margin-bottom:12px}.tab-btn-compact{padding:8px 14px;font-size:13px;flex:1;text-align:center;min-width:80px}.management-section{padding:14px;border-radius:12px}.section-header-compact{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:12px;padding-bottom:10px}.section-title-group h2{font-size:1.05rem}.header-actions-compact{width:100%;gap:8px}.search-box{flex:1;padding:7px 10px}.search-box input{width:100%;font-size:14px}.btn-primary-compact{padding:7px 12px;font-size:12px}.filter-select-compact{padding:7px 10px;font-size:13px}.table-header{display:none}.data-table{gap:10px}.table-row{display:flex;flex-direction:column;gap:8px;padding:14px;background:#fffc;border:1px solid rgba(20,184,166,.12);border-radius:10px}.col-name{width:100%}.user-name{font-size:15px}.col-id,.col-remark{padding-left:42px;font-size:12px}.col-actions{justify-content:flex-start;padding-left:42px;gap:8px}.btn-icon{width:34px;height:34px}.appointment-list{gap:10px}.appointment-card{flex-direction:column;align-items:flex-start;gap:10px;padding:14px}.appointment-main{width:100%}.appointment-info h3{font-size:15px;white-space:normal}.appointment-meta{flex-wrap:wrap;gap:8px}.appointment-actions{width:100%;flex-wrap:wrap;gap:6px}.btn-action-small{padding:6px 14px;font-size:13px;flex:1;min-width:60px}.modal-overlay{padding:8px;align-items:flex-end}.modal-content-compact{padding:18px;border-radius:16px 16px 0 0;max-height:90vh;margin:0;animation:slideUp .25s ease}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.modal-header h2{font-size:1.1rem}.form-row.two-col{grid-template-columns:1fr;gap:0}.form-group-compact input,.form-group-compact textarea,.form-group-compact select{padding:12px;font-size:16px}.modal-actions-compact{flex-direction:column;gap:8px}.modal-actions-compact .btn-primary-compact,.modal-actions-compact .btn-secondary-compact{width:100%;justify-content:center;padding:12px}.dropdown-menu{max-height:200px}.dropdown-item{padding:12px;font-size:14px}.loading-container{padding:30px}.empty-state-compact{padding:40px 20px}.assign-teacher-info{padding:12px}.teacher-avatar-compact{width:40px;height:40px}.quick-select-section{margin-top:12px;padding-top:12px}.student-chip{padding:6px 12px;font-size:13px}.operation-message{inset:auto 16px 20px;text-align:center}}@media(max-width:380px){.management-page{padding:6px}.tab-btn-compact{padding:7px 10px;font-size:12px}.management-section,.appointment-card,.table-row{padding:12px}}.practice-game-page{position:fixed;inset:0;min-height:100vh;background:linear-gradient(135deg,#f0fdfa,#ccfbf1,#99f6e4);display:flex;flex-direction:column;z-index:3000;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}.practice-game-header{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;background:linear-gradient(135deg,#14b8a6,#0d9488);box-shadow:0 4px 16px #0d94884d;flex-shrink:0}.practice-game-back-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;background:#0d94888c;color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:20px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease}.practice-game-back-btn:hover{background:#ffffff40;border-color:#ffffff80;transform:translate(-2px)}.practice-game-title{font-size:1.2rem;color:#fff;margin:0;font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.15)}.practice-game-header-right{display:flex;align-items:center;gap:12px}.practice-game-confirm-toggle{padding:6px 14px;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;transition:all .3s ease;border:1px solid;display:flex;align-items:center;gap:6px}.practice-game-confirm-toggle.enabled{background:#fff3;color:#fff;border-color:#fff6}.practice-game-confirm-toggle.disabled{background:#ffffff1a;color:#fff9;border-color:#ffffff26}.practice-game-confirm-toggle .toggle-icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;flex-shrink:0}.practice-game-confirm-toggle .toggle-icon.icon-enabled{background:#4ade8040;color:#4ade80}.practice-game-confirm-toggle .toggle-icon.icon-disabled{background:#ffffff1a;color:#ffffff80}.practice-game-confirm-toggle:hover{transform:translateY(-1px)}.practice-game-level-nav{display:flex;align-items:center;gap:10px}.practice-game-nav-btn{padding:6px 14px;background:#ffffff26;color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:all .3s ease}.practice-game-nav-btn:hover:not(:disabled){background:#ffffff40;border-color:#ffffff80}.practice-game-nav-btn:disabled{opacity:.4;cursor:not-allowed}.practice-game-level-counter{font-size:14px;font-weight:600;color:#fff;padding:6px 12px}.practice-game-body{flex:1;display:flex;align-items:flex-start;justify-content:center;gap:24px;padding:20px;overflow:visible}.practice-game-board-area{flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;width:100%;box-sizing:border-box}@media(max-width:900px){.practice-game-board-area{width:calc(100% + 20px);margin-left:-10px;margin-right:-10px}}.practice-game-sidebar{width:280px;flex-shrink:0;display:flex;flex-direction:column;gap:12px;overflow-y:auto;position:relative}.practice-game-info-card{background:#ffffffd9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:16px;padding:20px;border:1px solid rgba(20,184,166,.15);box-shadow:0 2px 8px #14b8a614}.practice-game-info-card h2{margin:0 0 10px;font-size:1.2rem;color:#134e4a;font-weight:700}.practice-game-desc{margin:0 0 12px;font-size:14px;color:#4b5563;line-height:1.6}.practice-game-difficulty{display:inline-block;padding:4px 12px;border-radius:12px;font-size:12px;font-weight:600}.difficulty-入门{background:#10b9811f;color:#059669;border:1px solid rgba(16,185,129,.3)}.difficulty-初级{background:#3b82f61f;color:#2563eb;border:1px solid rgba(59,130,246,.3)}.difficulty-中级{background:#f59e0b1f;color:#d97706;border:1px solid rgba(245,158,11,.3)}.difficulty-高级{background:#ef44441f;color:#dc2626;border:1px solid rgba(239,68,68,.3)}.difficulty-大师{background:#8b5cf61f;color:#7c3aed;border:1px solid rgba(139,92,246,.3)}.practice-game-turn-info{margin-top:12px;padding-top:12px;border-top:1px solid rgba(20,184,166,.15);display:flex;flex-direction:column;gap:6px}.practice-game-turn-indicator{font-size:14px;font-weight:600;color:#134e4a;display:flex;align-items:center;gap:6px}.turn-stone{display:inline-block;width:14px;height:14px;border-radius:50%;flex-shrink:0}.turn-stone-black{background:radial-gradient(circle at 35% 35%,#666,#1a1a1a);box-shadow:1px 1px 2px #0000004d}.turn-stone-white{background:radial-gradient(circle at 35% 35%,#fff,#ddd);border:1px solid #bbb;box-shadow:1px 1px 2px #0003}.practice-game-captures{font-size:13px;color:#4b5563}.practice-game-solution-progress{font-size:13px;color:#6b7280;font-weight:500}.practice-game-ai-count{font-size:13px;color:#7c3aed;font-weight:600}.practice-game-completed-badge{display:inline-flex;align-items:center;padding:4px 14px;background:linear-gradient(135deg,#10b981,#059669);color:#fff;border-radius:20px;font-size:13px;font-weight:700;letter-spacing:.5px;box-shadow:0 2px 10px #10b9814d}.practice-game-feedback{border-radius:12px;padding:14px 18px;font-size:14px;font-weight:600;line-height:1.6;text-align:center}.practice-game-feedback.feedback-correct{background:#10b9811f;border:1px solid rgba(16,185,129,.4);color:#059669;box-shadow:0 4px 15px #10b98126}.practice-game-feedback.feedback-incorrect{background:#ef44441f;border:1px solid rgba(239,68,68,.4);color:#dc2626;box-shadow:0 4px 15px #ef444426}.practice-game-feedback.feedback-completed{background:#f59e0b1f;border:1px solid rgba(245,158,11,.4);color:#d97706;font-size:16px;box-shadow:0 4px 20px #f59e0b33}.practice-game-feedback.feedback-ai_thinking{background:#8b5cf61f;border:1px solid rgba(139,92,246,.4);color:#7c3aed;box-shadow:0 4px 15px #8b5cf626;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.practice-game-ctrl-btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important}.practice-game-ctrl-btn.next-level-btn{background:linear-gradient(135deg,#14b8a6,#0d9488);color:#fff;box-shadow:0 4px 15px #14b8a64d;font-size:15px}.practice-game-ctrl-btn.next-level-btn:hover{box-shadow:0 6px 20px #14b8a666}.practice-game-placement-confirm{position:absolute;bottom:0;left:0;right:0;display:flex;gap:10px;padding:12px;z-index:20;background:#fffffff2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid rgba(20,184,166,.2);border-radius:0 0 16px 16px;box-shadow:0 -2px 12px #14b8a61a}.practice-game-placement-confirm~.practice-game-controls{opacity:.3;pointer-events:none}.practice-game-placement-confirm .practice-game-ctrl-btn{flex:1}.practice-game-ctrl-btn.confirm-btn{background:linear-gradient(135deg,#14b8a6,#0d9488);color:#fff;box-shadow:0 4px 15px #14b8a64d}.practice-game-ctrl-btn.confirm-btn:hover{box-shadow:0 6px 20px #14b8a666}.practice-game-ctrl-btn.cancel-btn{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;box-shadow:0 4px 15px #ef44444d}.practice-game-ctrl-btn.cancel-btn:hover{box-shadow:0 6px 20px #ef444466}.practice-game-controls{display:flex;flex-direction:column;gap:8px}.practice-game-ctrl-btn{padding:10px 20px;border:none;border-radius:12px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease;text-align:center}.practice-game-ctrl-btn:hover{transform:translateY(-2px)}.practice-game-ctrl-btn.hint-btn{background:linear-gradient(135deg,#deb887,tan,#c4a67c);color:#5a3a1a;box-shadow:0 2px 8px #c4a67c4d}.practice-game-ctrl-btn.undo-btn{background:linear-gradient(135deg,#14b8a6,#0d9488);color:#fff;box-shadow:0 2px 8px #14b8a64d}.practice-game-ctrl-btn.reset-btn{background:linear-gradient(135deg,#deb887,tan,#c4a67c);color:#5a3a1a;box-shadow:0 2px 8px #c4a67c4d}.practice-game-ctrl-btn.sgf-btn,.practice-game-ctrl-btn.copy-btn{background:#fffc;color:#134e4a;border:1px solid rgba(20,184,166,.2);box-shadow:0 2px 8px #0000000d}.practice-game-hint{background:#f59e0b14;border:1px solid rgba(245,158,11,.25);border-radius:12px;padding:16px}.practice-game-hint .hint-label{display:block;font-weight:700;color:#d97706;margin-bottom:8px;font-size:14px}.practice-game-hint p{margin:0;color:#4b5563;font-size:14px;line-height:1.6}.practice-game-sgf-panel{background:#ffffffd9;border:1px solid rgba(139,92,246,.2);border-radius:12px;padding:16px;max-height:200px;overflow-y:auto}.practice-game-sgf-panel .hint-label{display:block;font-weight:700;color:#7c3aed;margin-bottom:8px;font-size:14px}.practice-game-sgf-panel .sgf-content{margin:0;font-size:11px;font-family:Courier New,monospace;color:#4b5563;line-height:1.4;white-space:pre-wrap;word-break:break-all}@media(max-width:900px){.practice-game-body{flex-direction:column;align-items:center;gap:16px;padding:10px 10px 80px;overflow:visible;flex:none;min-height:0}.practice-game-sidebar{width:100%;max-width:400px;flex-direction:row;flex-wrap:wrap;gap:10px;overflow:visible}.practice-game-info-card{flex:1;min-width:200px}.practice-game-placement-confirm{padding:8px;gap:6px;border-radius:0}.practice-game-controls{flex-direction:row;flex-wrap:wrap;flex:1;min-width:200px}.practice-game-ctrl-btn{flex:1;min-width:100px;padding:10px 12px;font-size:13px}.practice-game-header{flex-wrap:wrap;gap:8px;padding:8px 12px}.practice-game-back-btn{padding:6px 12px;font-size:12px;gap:4px}.practice-game-back-btn svg{width:16px;height:16px}.practice-game-title{font-size:.9rem;order:-1;width:100%;text-align:center;padding:0 8px}.practice-game-header-right{width:100%;justify-content:flex-start;gap:4px;flex-wrap:wrap}.practice-game-confirm-toggle{padding:4px 10px;font-size:11px}.practice-game-level-nav{gap:6px}.practice-game-nav-btn{padding:4px 10px;font-size:11px}.practice-game-level-counter{font-size:12px;padding:4px 8px}.fusion-toggle{padding:4px 10px!important;font-size:11px!important}}@media(max-width:600px){.practice-game-sidebar{flex-direction:column}.practice-game-controls{flex-direction:row}.practice-game-ctrl-btn{flex:1}}.practice-ai-training-page{position:fixed;inset:0;background:linear-gradient(135deg,#f0fdfa,#ccfbf1,#99f6e4);display:flex;flex-direction:column;z-index:2000;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;font-family:YouYuan,幼圆,Microsoft YaHei,sans-serif;color:#134e4a}.practice-ai-training-header{display:flex;align-items:center;gap:20px;padding:14px 28px;background:linear-gradient(135deg,#14b8a6,#0d9488);flex-shrink:0;box-shadow:0 4px 16px #0d94884d}.practice-ai-training-back-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 20px;background:#fff3;color:#fff;border:2px solid rgba(255,255,255,.5);border-radius:25px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease;font-family:inherit}.practice-ai-training-back-btn:hover{background:#ffffff4d;transform:translate(-3px)}.practice-ai-training-title{flex:1;margin:0;font-size:1.3rem;color:#fff;font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.1)}.practice-ai-training-header-right{display:flex;align-items:center;gap:12px}.practice-ai-training-completed-badge{padding:4px 14px;background:#10b98133;border:1px solid rgba(16,185,129,.5);border-radius:12px;color:#10b981;font-size:12px;font-weight:600}.practice-ai-training-confirm-toggle{padding:6px 14px;border:2px solid rgba(255,255,255,.4);border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;transition:all .3s ease;background:#ffffff26;color:#fff;font-family:inherit;white-space:nowrap}.practice-ai-training-confirm-toggle.enabled{background:#10b9814d;border-color:#10b98199;color:#fff}.practice-ai-training-confirm-toggle.disabled{background:#ef444433;border-color:#ef444480;color:#ffffffe6}.practice-ai-training-body{flex:1;display:flex;gap:20px;padding:20px;min-height:0}.practice-ai-training-board-area{flex:1;display:flex;align-items:center;justify-content:center;background:#ffffffd9;border-radius:16px;border:2px solid rgba(20,184,166,.2);box-shadow:0 4px 20px #14b8a61a;overflow:hidden}.practice-ai-training-sidebar{width:280px;flex-shrink:0;display:flex;flex-direction:column;gap:16px;overflow-y:auto;position:relative}.practice-ai-training-info-card{background:#fff;border-radius:16px;padding:20px;border:2px solid rgba(20,184,166,.15);box-shadow:0 2px 8px #14b8a614}.practice-ai-training-info-card h2{margin:0 0 8px;font-size:1.1rem;color:#134e4a;font-weight:700}.practice-ai-training-difficulty{display:inline-block;padding:3px 12px;border-radius:12px;font-size:12px;font-weight:600;color:#fff;margin-bottom:10px}.practice-ai-training-difficulty.difficulty-入门{background:#059669}.practice-ai-training-difficulty.difficulty-初级{background:#2563eb}.practice-ai-training-difficulty.difficulty-中级{background:#d97706}.practice-ai-training-difficulty.difficulty-高级{background:#dc2626}.practice-ai-training-difficulty.difficulty-大师{background:#7c3aed}.practice-ai-training-level-info{display:flex;align-items:center;gap:8px;margin-bottom:12px}.practice-ai-training-level-badge{padding:3px 10px;border-radius:10px;font-size:11px;font-weight:600;background:#14b8a626;color:#0d9488}.practice-ai-training-level-label{font-size:13px;color:#5b6d6b}.practice-ai-training-mcts-sims{font-size:12px;color:#0d9488;background:#14b8a61f;padding:2px 10px;border-radius:10px;white-space:nowrap}.practice-ai-training-desc{margin:0 0 12px;font-size:13px;color:#6b7d7b;line-height:1.6}.practice-ai-training-turn-info{display:flex;flex-direction:column;gap:6px}.practice-ai-training-turn-indicator{font-size:14px;font-weight:600;color:#134e4a}.practice-ai-training-player-color{font-size:13px;color:#6b7d7b}.practice-ai-training-game-over-actions,.practice-ai-training-controls{display:flex;gap:10px}.practice-ai-training-ctrl-btn{flex:1;padding:10px 16px;border:none;border-radius:12px;font-size:13px;font-weight:600;cursor:pointer;transition:all .3s ease;background:#fff;color:#134e4a;border:2px solid rgba(20,184,166,.25);font-family:inherit}.practice-ai-training-ctrl-btn:hover:not(:disabled){background:#14b8a614;transform:translateY(-2px);box-shadow:0 4px 12px #14b8a626}.practice-ai-training-ctrl-btn:disabled{opacity:.4;cursor:not-allowed}.practice-ai-training-ctrl-btn.size-btn{background:#14b8a61a;border-color:#14b8a659;color:#0d9488;flex:0 0 auto;padding:10px 12px;font-size:13px;white-space:nowrap;min-width:56px;font-weight:700}.practice-ai-training-ctrl-btn.size-btn:hover{background:#14b8a633}.practice-ai-training-ctrl-btn.replay-btn{background:linear-gradient(135deg,#14b8a6,#0d9488);border:none;font-size:14px;padding:12px 20px;color:#fff;box-shadow:0 4px 12px #14b8a64d}.practice-ai-training-ctrl-btn.replay-btn:hover{background:linear-gradient(135deg,#2dd4bf,#14b8a6);box-shadow:0 6px 20px #14b8a659}.practice-ai-training-hint{background:#f59e0b14;border:1px solid rgba(245,158,11,.2);border-radius:12px;padding:14px}.practice-ai-training-hint .hint-label{font-size:12px;font-weight:600;color:#d97706}.practice-ai-training-hint p{margin:6px 0 0;font-size:13px;color:#6b7d7b;line-height:1.5}.practice-ai-training-placement-confirm{display:flex;flex-direction:column;gap:8px;padding:8px 0;min-height:130px;justify-content:center}.practice-ai-training-ctrl-btn.placement-confirm-btn{background:linear-gradient(135deg,#10b981,#059669);border:none;color:#fff;flex:1;box-shadow:0 3px 10px #10b9814d}.practice-ai-training-ctrl-btn.placement-confirm-btn:hover{background:linear-gradient(135deg,#34d399,#10b981);box-shadow:0 4px 14px #10b98166}.practice-ai-training-ctrl-btn.placement-cancel-btn{background:linear-gradient(135deg,#f59e0b,#d97706);border:none;color:#fff;flex:1;box-shadow:0 3px 10px #f59e0b4d}.practice-ai-training-ctrl-btn.placement-cancel-btn:hover{background:linear-gradient(135deg,#fbbf24,#f59e0b);box-shadow:0 4px 14px #f59e0b66}@media(max-width:768px){.practice-ai-training-header{padding:10px 16px;gap:8px;flex-wrap:wrap}.practice-ai-training-title{font-size:1rem;min-width:0;flex:0 1 auto;order:-1}.practice-ai-training-back-btn{padding:6px 14px;font-size:12px;gap:4px}.practice-ai-training-header-right{gap:6px;flex-wrap:wrap}.practice-ai-training-completed-badge{padding:2px 10px;font-size:11px}.practice-ai-training-confirm-toggle{padding:4px 10px;font-size:11px}.practice-ai-training-body{flex-direction:column;padding:10px;gap:10px;flex:none;min-height:0}.practice-ai-training-board-area{flex:none;width:100%;min-height:260px;border-radius:12px;overflow:hidden}.practice-ai-training-sidebar{width:100%;flex-shrink:0;flex-direction:row;flex-wrap:wrap;gap:10px;overflow:visible;max-height:none}.practice-ai-training-info-card{width:100%;padding:14px}.practice-ai-training-info-card h2{font-size:.95rem;margin-bottom:4px}.practice-ai-training-difficulty{font-size:11px;padding:2px 10px;margin-bottom:6px}.practice-ai-training-level-info{margin-bottom:6px}.practice-ai-training-level-label{font-size:12px}.practice-ai-training-mcts-sims{font-size:11px;padding:2px 8px}.practice-ai-training-desc{font-size:12px;margin-bottom:8px}.practice-ai-training-turn-info{gap:4px}.practice-ai-training-turn-indicator,.practice-ai-training-player-color{font-size:12px}.practice-ai-training-controls{width:100%;gap:6px}.practice-ai-training-ctrl-btn{padding:8px 12px;font-size:12px}.practice-ai-training-ctrl-btn.replay-btn{font-size:13px;padding:10px 16px}.practice-ai-training-placement-confirm{min-height:100px;gap:6px;padding:4px 0}.practice-ai-training-hint{padding:10px}.practice-ai-training-hint .hint-label{font-size:11px}.practice-ai-training-hint p{font-size:12px;margin-top:4px}.practice-ai-training-game-over-actions{width:100%}}@media(max-width:480px){.practice-ai-training-header{padding:8px 10px;gap:4px}.practice-ai-training-title{font-size:.85rem}.practice-ai-training-back-btn{padding:4px 10px;font-size:11px}.practice-ai-training-back-btn svg{width:16px;height:16px}.practice-ai-training-back-btn svg path{stroke:#fff}.practice-ai-training-header-right{gap:4px}.practice-ai-training-confirm-toggle{padding:3px 8px;font-size:10px}.practice-ai-training-body{padding:6px;gap:6px}.practice-ai-training-sidebar{gap:6px}.practice-ai-training-info-card{padding:10px}.practice-ai-training-info-card h2{font-size:.85rem}.practice-ai-training-ctrl-btn{padding:6px 10px;font-size:11px}.practice-ai-training-ctrl-btn.replay-btn{font-size:12px;padding:8px 14px}.practice-ai-training-hint{padding:8px}.practice-ai-training-hint p{font-size:11px}}.practice-ai-training-result-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:3000;animation:fadeIn .3s ease}.practice-ai-training-result-modal{background:#fff;border-radius:20px;padding:36px 32px 28px;text-align:center;max-width:340px;width:90%;box-shadow:0 20px 60px #0000004d;animation:slideUp .3s ease;display:flex;flex-direction:column;align-items:center;gap:12px}@keyframes slideUp{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.practice-ai-training-result-icon{font-size:56px;line-height:1;margin-bottom:4px}.practice-ai-training-result-modal h2{margin:0;font-size:1.4rem;color:#134e4a;font-weight:700}.practice-ai-training-result-text{margin:0;font-size:15px;color:#5b6d6b;line-height:1.5}.practice-ai-training-result-actions{display:flex;flex-direction:column;gap:10px;width:100%;margin-top:8px}.practice-ai-training-result-actions .practice-ai-training-ctrl-btn{width:100%;padding:12px 20px;font-size:15px}.practice-ai-training-result-actions .practice-ai-training-ctrl-btn.replay-btn{background:linear-gradient(135deg,#14b8a6,#0d9488);border:none;color:#fff;box-shadow:0 4px 12px #14b8a64d}.practice-ai-training-result-actions .practice-ai-training-ctrl-btn.replay-btn:hover{background:linear-gradient(135deg,#2dd4bf,#14b8a6);box-shadow:0 6px 20px #14b8a659}.public-course-page{min-height:100vh;background:linear-gradient(135deg,#f0fdfa,#ccfbf1,#99f6e4);padding:30px;position:relative}.public-course-back-btn{position:fixed;top:20px;left:20px;z-index:100;display:inline-flex;align-items:center;gap:8px;padding:10px 20px;background:linear-gradient(135deg,#14b8a6,#0d9488);color:#fff;border:2px solid rgba(255,255,255,.5);border-radius:25px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 15px #14b8a64d}.public-course-back-btn:hover{background:linear-gradient(135deg,#2dd4bf,#14b8a6);border-color:#fffc;transform:translateY(-2px);box-shadow:0 6px 25px #14b8a666}.public-course-header{text-align:center;margin-bottom:40px;padding-top:20px}.public-course-header h1{font-size:2.5rem;margin:0 0 15px;background:linear-gradient(135deg,#14b8a6,#0d9488);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.public-course-subtitle{font-size:1.1rem;color:#666;max-width:600px;margin:0 auto;line-height:1.6}.public-course-content{max-width:1100px;margin:0 auto}@media(max-width:768px){.public-course-page{padding:16px}.public-course-back-btn{top:12px;left:12px;padding:8px 14px;font-size:12px;gap:4px;border-radius:20px}.public-course-header{margin-bottom:24px;padding-top:50px}.public-course-header h1{font-size:1.6rem}.public-course-subtitle{font-size:.9rem;max-width:100%;padding:0 8px}.public-course-content{padding:0}.class-list{gap:12px}.class-card{padding:16px 18px;border-radius:12px}.class-card-top{flex-direction:column;gap:8px;margin-bottom:12px}.class-title{font-size:1rem}.class-info-grid{grid-template-columns:1fr 1fr;gap:8px 12px}.info-label{font-size:11px}.info-value{font-size:13px}.class-card-arrow{display:none}.class-list-loading,.class-list-error,.class-list-empty{padding:60px 16px}.class-list-empty .empty-icon{font-size:48px}.class-list-loading p,.class-list-error p,.class-list-empty p{font-size:.95rem}}@media(max-width:480px){.public-course-page{padding:10px}.public-course-back-btn{top:8px;left:8px;padding:6px 10px;font-size:11px;border-radius:16px}.public-course-header h1{font-size:1.3rem}.public-course-subtitle{font-size:.8rem}.class-card{padding:12px 14px;border-radius:10px}.class-title{font-size:.9rem}.class-info-grid{grid-template-columns:1fr;gap:6px}.class-status{font-size:11px;padding:3px 10px}.info-label{font-size:10px}.info-value{font-size:12px}.class-list-loading,.class-list-error,.class-list-empty{padding:40px 16px}.class-list-empty .empty-icon{font-size:40px}.class-list-loading p,.class-list-error p,.class-list-empty p{font-size:.85rem}.retry-btn{padding:8px 18px;font-size:13px}}.class-course-page{min-height:100vh;background:linear-gradient(135deg,#f0fdfa,#ccfbf1,#99f6e4);padding:30px;position:relative}.class-course-back-btn{position:fixed;top:20px;left:20px;z-index:100;display:inline-flex;align-items:center;gap:8px;padding:10px 20px;background:linear-gradient(135deg,#14b8a6,#0d9488);color:#fff;border:2px solid rgba(255,255,255,.5);border-radius:25px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 15px #14b8a64d}.class-course-back-btn:hover{background:linear-gradient(135deg,#2dd4bf,#14b8a6);border-color:#fffc;transform:translateY(-2px);box-shadow:0 6px 25px #14b8a666}.class-course-header{text-align:center;margin-bottom:40px;padding-top:20px}.class-course-header h1{font-size:2.5rem;margin:0 0 15px;background:linear-gradient(135deg,#14b8a6,#0d9488);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.class-course-subtitle{font-size:1.1rem;color:#666;max-width:600px;margin:0 auto;line-height:1.6}.class-course-content{max-width:1100px;margin:0 auto}.class-list{display:flex;flex-direction:column;gap:16px}.class-card{background:#fff;border-radius:16px;padding:24px 28px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #0000000f;border:2px solid transparent;position:relative}.class-card:hover{border-color:#14b8a6}.class-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}.class-title{margin:0;font-size:1.2rem;color:#1a1a2e;font-weight:700;line-height:1.4;flex:1}.class-status{padding:4px 14px;border-radius:20px;font-size:12px;font-weight:600;white-space:nowrap;flex-shrink:0}.class-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}.class-info-item{display:flex;flex-direction:column;gap:2px}.info-label{font-size:12px;color:#999;font-weight:500}.info-value{font-size:14px;color:#444;font-weight:600}.class-card-arrow{position:absolute;right:24px;top:50%;transform:translateY(-50%);font-size:24px;color:#14b8a6;opacity:0;transition:all .3s ease}.class-card:hover .class-card-arrow{opacity:1;right:20px}.class-list-loading,.class-list-error,.class-list-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:100px 20px;text-align:center}.loading-spinner{width:40px;height:40px;border:4px solid #e0e0e0;border-top-color:#14b8a6;border-radius:50%;animation:spin .8s linear infinite;margin-bottom:16px}@keyframes spin{to{transform:rotate(360deg)}}.class-list-loading p,.class-list-error p,.class-list-empty p{font-size:1.1rem;color:#999;margin:0 0 8px}.class-list-empty .empty-icon{font-size:64px;margin-bottom:16px;opacity:.5}.class-list-empty .empty-hint{font-size:14px;color:#bbb}.retry-btn{margin-top:12px;padding:10px 24px;background:linear-gradient(135deg,#14b8a6,#0d9488);color:#fff;border:none;border-radius:12px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease}.retry-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #14b8a64d}@media(max-width:768px){.class-course-page{padding:16px}.class-course-back-btn{top:12px;left:12px;padding:8px 14px;font-size:12px;gap:4px;border-radius:20px}.class-course-header{margin-bottom:24px;padding-top:50px}.class-course-header h1{font-size:1.6rem}.class-course-subtitle{font-size:.9rem;max-width:100%;padding:0 8px}.class-course-content{padding:0}.class-list{gap:12px}.class-card{padding:16px 18px;border-radius:12px}.class-card-top{flex-direction:column;gap:8px;margin-bottom:12px}.class-title{font-size:1rem}.class-info-grid{grid-template-columns:1fr 1fr;gap:8px 12px}.info-label{font-size:11px}.info-value{font-size:13px}.class-card-arrow{display:none}.class-list-loading,.class-list-error,.class-list-empty{padding:60px 16px}.class-list-empty .empty-icon{font-size:48px}.class-list-loading p,.class-list-error p,.class-list-empty p{font-size:.95rem}}@media(max-width:480px){.class-course-page{padding:10px}.class-course-back-btn{top:8px;left:8px;padding:6px 10px;font-size:11px;border-radius:16px}.class-course-header h1{font-size:1.3rem}.class-course-subtitle{font-size:.8rem}.class-card{padding:12px 14px;border-radius:10px}.class-title{font-size:.9rem}.class-info-grid{grid-template-columns:1fr;gap:6px}.class-status{font-size:11px;padding:3px 10px}.info-label{font-size:10px}.info-value{font-size:12px}.class-list-loading,.class-list-error,.class-list-empty{padding:40px 16px}.class-list-empty .empty-icon{font-size:40px}.class-list-loading p,.class-list-error p,.class-list-empty p{font-size:.85rem}.retry-btn{padding:8px 18px;font-size:13px}}.notification{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);padding:20px 24px;border-radius:10px;box-shadow:0 8px 24px #00000040;display:flex;align-items:center;justify-content:space-between;min-width:250px;max-width:350px;z-index:var(--z-max);animation:fadeIn .3s ease-out;transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease;border:2px solid #333}.notification-content{flex:1;font-size:16px;font-weight:600;margin-right:12px;text-align:center;font-family:YouYuan,幼圆,Microsoft YaHei,sans-serif}.notification-close{background:transparent;border:none;font-size:20px;cursor:pointer;opacity:.7;transition:opacity .2s ease;padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:50%}.notification-close:hover{opacity:1;background:#0000001a}.notification-error{background-color:#fef2f2;border-left:4px solid #ef4444;color:#dc2626}.notification-warning{background-color:#fffbeb;border-left:4px solid #f59e0b;color:#d97706}.notification-info{background-color:#eff6ff;border-left:4px solid #3b82f6;color:#2563eb}@keyframes fadeIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes fadeOut{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(.9)}}.notification.hide{animation:fadeOut .3s ease-in forwards}.disconnect-modal-overlay{position:fixed;inset:0;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:var(--z-max);animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.disconnect-modal-container{background:linear-gradient(135deg,#2c3e50,#34495e);border-radius:16px;padding:32px;max-width:400px;width:90%;box-shadow:0 20px 60px #00000080;animation:slideIn .3s ease;border:2px solid #e74c3c}@keyframes slideIn{0%{transform:translateY(-30px);opacity:0}to{transform:translateY(0);opacity:1}}.disconnect-modal-header{text-align:center;margin-bottom:24px}.disconnect-icon{font-size:48px;margin-bottom:12px;animation:pulse 2s infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.disconnect-modal-header h2{color:#e74c3c;margin:0;font-size:24px;font-weight:700}.disconnect-modal-content{text-align:center;margin-bottom:28px}.disconnect-message{color:#ecf0f1;font-size:18px;margin:0 0 12px;line-height:1.5}.disconnect-hint{color:#95a5a6;font-size:14px;margin:0}.disconnect-countdown{margin:24px 0;display:flex;flex-direction:column;align-items:center}.countdown-ring{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#f39c12,#e74c3c);display:flex;justify-content:center;align-items:center;box-shadow:0 4px 20px #e74c3c66;animation:countdownPulse 1s ease-in-out infinite}@keyframes countdownPulse{0%,to{transform:scale(1);box-shadow:0 4px 20px #e74c3c66}50%{transform:scale(1.05);box-shadow:0 6px 30px #e74c3c99}}.countdown-number{font-size:36px;font-weight:700;color:#fff}.countdown-hint{color:#e74c3c;font-size:14px;margin-top:12px;font-weight:500}.reconnect-token-hint{color:#3498db;font-size:12px;margin-top:8px;font-style:italic}.disconnect-modal-footer{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.disconnect-btn{padding:14px 32px;border:none;border-radius:8px;font-size:16px;font-weight:700;cursor:pointer;transition:transform .3s ease,opacity .3s ease,background-color .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease;min-width:140px}.disconnect-btn-reconnect{background:linear-gradient(135deg,#e74c3c,#c0392b);color:#fff;box-shadow:0 4px 15px #e74c3c66}.disconnect-btn-reconnect:hover{background:linear-gradient(135deg,#c0392b,#a93226);transform:translateY(-2px);box-shadow:0 6px 20px #e74c3c80}.disconnect-btn-reconnect:active{transform:translateY(0);box-shadow:0 2px 10px #e74c3c66}.disconnect-btn-reconnect:disabled{background:linear-gradient(135deg,#95a5a6,#7f8c8d);cursor:not-allowed;transform:none;box-shadow:none}.disconnect-btn-disconnect{background:transparent;color:#95a5a6;border:2px solid #95a5a6}.disconnect-btn-disconnect:hover{background:#95a5a61a;color:#ecf0f1;border-color:#ecf0f1}@media(max-width:480px){.disconnect-modal-container{padding:24px;margin:16px}.disconnect-modal-header h2{font-size:20px}.disconnect-message{font-size:16px}.disconnect-btn{padding:12px 24px;font-size:15px;width:100%}}.permission-modal-overlay{position:fixed;inset:0;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:var(--z-max);padding:16px}.permission-modal-container{background-color:#fff;border-radius:12px;width:100%;max-width:520px;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 4px 20px #0000004d}.permission-modal-header{padding:24px 24px 16px;text-align:center;border-bottom:1px solid #e0e0e0}.permission-modal-header h2{margin:0 0 8px;font-size:20px;font-weight:600;color:#333}.permission-subtitle{margin:0;font-size:14px;color:#888}.permission-modal-content{flex:1;overflow-y:auto;padding:20px 24px}.permission-table-container{margin-bottom:20px;overflow-x:auto}.permission-table{width:100%;border-collapse:collapse;font-size:14px}.permission-table th,.permission-table td{padding:12px 16px;text-align:left;border:1px solid #e0e0e0}.permission-table th{background-color:#f5f5f5;font-weight:600;color:#333}.permission-table td{color:#666}.permission-table tbody tr:hover{background-color:#fafafa}.permission-notice{background-color:#f8f9fa;border-radius:8px;padding:16px}.permission-notice h4{margin:0 0 12px;font-size:15px;font-weight:600;color:#333}.permission-notice ul{margin:0 0 12px;padding-left:20px}.permission-notice li{font-size:13px;color:#666;margin:8px 0;line-height:1.5}.permission-notice strong{color:#444;font-weight:600}.permission-tip{margin:12px 0 0;font-size:13px;color:#888;text-align:center;font-style:italic}.permission-modal-footer{padding:16px 24px;border-top:1px solid #e0e0e0;display:flex;justify-content:center}.permission-btn{padding:14px 48px;border:none;border-radius:8px;font-size:16px;font-weight:500;cursor:pointer;transition:transform .2s ease,opacity .2s ease,background-color .2s ease,color .2s ease,box-shadow .2s ease,border-color .2s ease;min-width:160px}.permission-btn-confirm{background-color:#4caf50;color:#fff}.permission-btn-confirm:hover{background-color:#45a049}.permission-btn-confirm:active{transform:scale(.98)}.dark-mode .permission-modal-container{background-color:#2d2d2d}.dark-mode .permission-modal-header{border-bottom-color:#444}.dark-mode .permission-modal-header h2{color:#fff}.dark-mode .permission-subtitle{color:#aaa}.dark-mode .permission-table th{background-color:#3d3d3d;color:#fff;border-color:#444}.dark-mode .permission-table td{color:#ccc;border-color:#444}.dark-mode .permission-table tbody tr:hover{background-color:#3a3a3a}.dark-mode .permission-notice{background-color:#3d3d3d}.dark-mode .permission-notice h4{color:#fff}.dark-mode .permission-notice li{color:#ccc}.dark-mode .permission-notice strong{color:#fff}.dark-mode .permission-tip{color:#999}.dark-mode .permission-modal-footer{border-top-color:#444}@media(max-width:480px){.permission-modal-container{max-height:90vh}.permission-modal-header{padding:20px 16px 12px}.permission-modal-content{padding:16px}.permission-table th,.permission-table td{padding:10px 12px;font-size:13px}.permission-modal-footer{padding:12px 16px}.permission-btn{padding:14px 32px;font-size:15px;width:100%}}@media(max-width:400px){.permission-table-container{position:relative}.permission-table-container:after{content:"← 左右滑动查看 →";position:absolute;bottom:-20px;left:50%;transform:translate(-50%);font-size:12px;color:#999;white-space:nowrap}}