:root{--bg-main: #fdfcfb;--bg-card: rgba(240, 235, 227, .9);--color-primary: #a3734f;--color-text: #3d2b1f;--color-text-light: #6b5a4a;--color-gold: #c8970a;--color-shichahai: #4a8b8c;--board-bg: #e6cba8;--board-line: #8b5a2b;--shadow-soft: 0 4px 20px rgba(163, 115, 79, .08);--shadow-strong: 0 8px 30px rgba(163, 115, 79, .15);--radius-lg: 24px;--radius-md: 16px;--font-serif: "Source Han Serif SC", "Noto Serif SC", Georgia, serif;--font-sans: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);color:var(--color-text);background:var(--bg-main);background-image:radial-gradient(circle at 50% 0%,rgba(74,139,140,.08) 0%,transparent 70%);min-height:100vh;display:flex;justify-content:center;align-items:center;overflow:hidden}.app-container{width:100%;max-width:600px;height:100vh;position:relative;display:flex;flex-direction:column}.cloud-indicator{position:absolute;top:12px;right:16px;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--color-text-light);z-index:100;background:#fdfcfbd9;padding:6px 12px;border-radius:20px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:var(--shadow-soft)}.screen{flex:1;display:flex;flex-direction:column;padding:24px;height:100%;overflow-y:auto}.card{background:var(--bg-card);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(163,115,79,.2);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);padding:24px}button{font-family:inherit;cursor:pointer;border:none;outline:none;transition:all .2s ease}.start-screen{justify-content:center;align-items:center;gap:32px}.title-section{text-align:center}.main-title{font-family:var(--font-serif);font-size:48px;color:var(--color-primary);margin-bottom:8px;text-shadow:2px 2px 4px rgba(163,115,79,.2)}.subtitle{font-size:16px;color:var(--color-shichahai);letter-spacing:2px;font-style:italic}.score-board{display:flex;align-items:center;gap:20px;padding:16px 32px;border-radius:30px;font-weight:700}.score-item{display:flex;align-items:center;gap:8px}.score-dot{width:12px;height:12px;border-radius:50%}.score-dot.black{background:#222}.score-dot.white{background:#fff;border:1px solid #ccc}.score-divider{width:1px;height:20px;background:#a3734f4d}.menu-cards{display:flex;flex-direction:column;gap:16px;width:100%;max-width:320px}.menu-btn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:16px;background:var(--color-primary);color:#fff;font-size:16px;border-radius:var(--radius-md);box-shadow:var(--shadow-soft)}.menu-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-strong)}.menu-btn.secondary{background:transparent;border:2px solid var(--color-primary);color:var(--color-primary)}.menu-btn.small{padding:10px 16px;font-size:14px;width:auto}.online-section{display:flex;flex-direction:column;gap:12px;padding:20px}.online-header{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--color-primary);margin-bottom:8px}.join-row{display:flex;gap:8px}.join-row input{flex:1;padding:10px 16px;border:1px solid rgba(163,115,79,.3);border-radius:var(--radius-md);background:#fff;font-family:inherit;text-transform:uppercase}.playing-screen{gap:16px;padding-top:40px}.game-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.icon-btn{background:var(--bg-card);border:1px solid rgba(163,115,79,.2);border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:var(--color-primary)}.turn-indicator{flex:1;display:flex;align-items:center;justify-content:space-between;padding:10px 20px;border-radius:30px}.turn-indicator .label{font-size:14px;color:var(--color-text-light)}.player-badge{padding:4px 16px;border-radius:20px;font-weight:700;font-size:14px}.player-badge.black{background:#222;color:#fff;box-shadow:0 2px 8px #0000004d}.player-badge.white{background:#fff;color:#222;border:1px solid #ddd;box-shadow:0 2px 8px #ffffff80}.room-code{font-size:12px;color:var(--color-text-light);background:var(--bg-card);padding:4px 10px;border-radius:12px}.board-container{position:relative;padding:12px;display:flex;justify-content:center;background:var(--board-bg);border:6px solid #6b4423;border-radius:8px;box-shadow:inset 0 0 30px #00000026,var(--shadow-strong);overflow:hidden}.water-bg{position:absolute;bottom:0;left:0;width:100%;height:60%;pointer-events:none;z-index:0;animation:wave 10s ease-in-out infinite alternate}@keyframes wave{0%{transform:scaleY(1) translateY(0)}to{transform:scaleY(1.1) translateY(10px)}}.board{display:flex;flex-direction:column;width:100%;aspect-ratio:1/1;max-width:500px;z-index:1}.board-row{display:flex;flex:1}.board-cell{flex:1;position:relative;cursor:pointer}.board-cell .h-line{position:absolute;top:50%;left:0;right:0;height:1px;background:var(--board-line);transform:translateY(-50%)}.board-cell .v-line{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--board-line);transform:translate(-50%)}.board-cell:hover .h-line,.board-cell:hover .v-line{background:#fff;box-shadow:0 0 5px #fff;z-index:1}.piece-wrapper{position:absolute;top:5%;left:5%;width:90%;height:90%;z-index:2;pointer-events:none}.piece-svg{width:100%;height:100%}.scroll-style{background:#f4e8d4;border-radius:8px;border-left:12px solid #8b5a2b;border-right:12px solid #8b5a2b;box-shadow:inset 0 0 15px #8b5a2b33,var(--shadow-strong);padding:16px;position:relative;margin-top:auto}.scroll-style:before,.scroll-style:after{content:"";position:absolute;top:-4px;bottom:-4px;width:6px;background:#5c3a21;border-radius:4px}.scroll-style:before{left:-12px}.scroll-style:after{right:-12px}.panel-title{font-family:var(--font-serif);font-size:16px;color:var(--color-text);text-align:center;margin-bottom:12px;border-bottom:1px dashed rgba(163,115,79,.4);padding-bottom:8px}.skills-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.skill-btn{display:flex;align-items:center;gap:8px;background:#fff9;border:1px solid rgba(163,115,79,.3);padding:8px;border-radius:8px;text-align:left}.skill-btn:not(:disabled):hover{background:#fff;transform:translateY(-2px);box-shadow:var(--shadow-soft)}.skill-btn:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(1)}.skill-icon{background:#a3734f1a;color:var(--color-primary);padding:6px;border-radius:50%;display:flex}.skill-info{display:flex;flex-direction:column;flex:1}.skill-name{font-weight:700;color:var(--color-text);font-size:13px}.skill-desc{font-size:10px;color:var(--color-text-light);white-space:nowrap}.skill-count{font-family:var(--font-serif);font-size:12px;color:var(--color-gold);font-weight:700;background:#c8970a1a;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:50%}.effect-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;display:flex;align-items:center;justify-content:center;pointer-events:none}.effect-overlay.sandstorm{background:#c8970a33;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.effect-overlay.cleaning{background:#fff6}.effect-overlay.freeze{background:#4a8b8c4d;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.spin-fast{animation:spin .5s linear infinite}.pulse-fast{animation:pulse .3s ease-in-out infinite alternate}.ripple-effect{animation:ripple 1s ease-out infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%{transform:scale(.8);opacity:.5}to{transform:scale(1.2);opacity:1}}@keyframes ripple{0%{transform:scale(.5);opacity:1}to{transform:scale(2);opacity:0}}.flash-effect{animation:flash 1s ease-out}@keyframes flash{0%{filter:brightness(1)}50%{filter:brightness(2) sepia(1)}to{filter:brightness(1)}}.gameover-screen{justify-content:center;align-items:center;background:#fdfcfbe6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:absolute;top:0;right:0;bottom:0;left:0;z-index:50}.result-card{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;width:90%;max-width:360px;padding:40px 24px}.result-title{font-family:var(--font-serif);font-size:36px;color:var(--color-primary)}.result-icon{width:80px;height:80px;display:flex;align-items:center;justify-content:center}.result-desc{font-size:16px;color:var(--color-text-light);font-style:italic}.action-buttons{display:flex;flex-direction:column;gap:12px;width:100%;margin-top:16px}