* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
            font-family: "Noto Serif SC", serif;
        }
	:root {
            --ink-dark: #0a2f55;
            --ink-light: #3a6ea5;
            --accent-blue: #1e88e5;
            --accent-cyan: #4fc3f7;
            --paper-light: #f0f7ff;
            --border-blue: rgba(30, 136, 229, 0.3);
	}
	
	body {
		margin: 0;
		padding: 2px 10px;
		font-family: Arial, sans-serif;
		max-width: 800px;
		margin: 0 auto;
		background-color: #ffffff;
		font-family: "Noto Serif SC", serif;
	}
	
/* /////////////////////////////////////////////*/
/* /////////////////////////////////////////////*/
/* /////////////////////////////////////////////*/

/* 提示框 */

        h1 {
            color: #333;
            text-align: center;
        }
        
        .demo-section {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        
        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            margin: 5px;
            transition: background-color 0.3s;
        }
        
        button:hover {
            background-color: #45a049;
        }
        
        /* 提示框样式 - 改进版 */
        .alert-box {
            position: fixed;
            top: -100px; /* 初始位置在屏幕外 */
            left: 50%;
            transform: translateX(-50%);
           /*  padding: 15px 25px; */
		    padding: 10px 5px;
            border-radius: 4px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.2);
            background-color: #fff;
            color: #333;
            font-size: 16px;
            z-index: -1; /* 不显示时在底层 */
            opacity: 0;
            transition: opacity 0.3s, top 0.3s, z-index 0.3s;
            display: flex;
            align-items: center;
            max-width: 80%;
            pointer-events: none; /* 不显示时不响应鼠标事件 */
        }
        
        .alert-box.show {
            opacity: 1;
            top: 30px;
            z-index: 1000; /* 显示时在最前 */
            pointer-events: auto; /* 显示时恢复鼠标事件 */
        }
        
        .alert-box.success {
            border-left: 4px solid #4CAF50;
			width: 80%; max-width: 320px;
        }
        
        .alert-box.error {
            border-left: 4px solid #f44336;
			width: 80%; max-width: 320px;
        }
        
        .alert-box.warning {
            border-left: 4px solid #ff9800;
			width: 80%; max-width: 320px;
        }
        
        .alert-box.info {
            border-left: 4px solid #2196F3;
			width: 80%; max-width: 320px;
        }
        
        .close-btn {
			/* 原有标识 */
           /*  margin-left: 15px;
            color: #888;
            font-weight: bold;
            cursor: pointer;
            user-select: none; */
			
			position: absolute; top: 0; right: 0; width: 18px;
        }
        
        .icon {
            margin-right: 10px;
            font-size: 20px;
        }
		
/* /////////////////////////////////////////////*/
/* /////////////////////////////////////////////*/
/* /////////////////////////////////////////////*/

	/* 公告栏 */

	#announcement-bar {
		/* position: fixed; */
		top: 0;
		left: 0;
		width: 100%;
		/* background-color: #f8f9fa; */
		color: #333;
	   /* padding: 10px 0; */
		overflow: hidden;
		white-space: nowrap;
		box-shadow: 0 2px 5px rgba(0,0,0,0.1);
		z-index: 1000;
	}

	#announcement-content {
		display: inline-block;
		padding-left: 100%;
	}

	.scrolling {
		animation: scroll-left linear forwards;
	}

	@keyframes scroll-left {
		0% {
			transform: translateX(0);
		}
		100% {
			transform: translateX(-100%);
		}
	}

/* /////////////////////////////////////////////*/
/* ///////////////////登录页面//////////////////////////*/


	input {
            display: block;
            width: 100%;
            padding: 8px;
            margin: 8px 0;
            box-sizing: border-box;
        }
        button {
            width: 100%;
            padding: 8px;
            margin-top: 8px;
            background-color: #007bff;
            color: white;
            border: none;
            cursor: pointer;
        }
        .error {
            color: #dc3545;
        }
		
/* /////////////////////////////////////////////*/
/* /////////////////////////////////////////////*/


/* /////////////////////////////////////////////*/
/* 	游戏内排版设计  */
/* /////////////////////////////////////////////*/


	
	/* 顶部信息栏 */
        .status-bar {
            display: flex;
            justify-content: space-between;
            padding: 8px 5px;
            margin-bottom: 12px;
            border-bottom: 1px dashed var(--accent-cyan);
            font-size: 0.9rem;
            color: var(--ink-light);
        }
        
        /* 位置导航 */
        .location-nav {
            text-align: center;
            padding: 8px 0;
            margin-bottom: 15px;
            border-bottom: 1px solid var(--border-blue);
            position: relative;
        }
        .location-nav::after {
            content: "〰";
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            color: var(--accent-blue);
            font-size: 1.2rem;
        }
        .location-title {
            font-weight: bold;
            color: var(--ink-dark);
            margin-bottom: 5px;
        }
        .location-actions a {
            display: inline-block;
            padding: 3px 8px;
            margin: 0 3px;
            background: rgba(79, 195, 247, 0.1);
            border-radius: 3px;
            color: var(--accent-blue);
            text-decoration: none;
        }
        
        /* 场景描述 */
        .scene-description {
            padding: 0px 5px;
            margin-bottom: 5px;
            line-height: 1.8;
            text-align: justify;
			font-size: 13px;
        }
        
        /* 交互元素 */
        .interactive-items {
            margin: 10px 0;
        }
        .item-category {
            color: var(--accent-blue);
            margin-bottom: 8px;
            padding-left: 10px;
            position: relative;
        }
        .item-category::before {
            content: "›";
            position: absolute;
            left: 0;
            color: var(--accent-cyan);
        }
        .item-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 10px;
        }
        .item {
			position: relative;
			/* 文字边框显示 */
            /* flex: 1 0 calc(50% - 10px);
            padding: 10px;
            border: 1px solid var(--border-blue);
            border-radius: 5px;
            text-align: center;
            background: rgba(255, 255, 255, 0.6); */
        }
        .item.important {
            border-left: 3px solid var(--accent-blue);
            background: rgba(79, 195, 247, 0.08);
        }
        
        /* 路径导航 */
        .path-navigation {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin: 25px 0;
        }
        .path {
            padding: 12px;
            text-align: center;
            border: 1px solid var(--border-blue);
            border-radius: 6px;
        }
        .path.disabled {
            color: #9E9E9E;
            border-style: dashed;
        }
        
        /* 玩家列表 */
        .player-list {
            margin: 20px 0;
            padding: 12px;
            border: 1px solid var(--border-blue);
            border-radius: 6px;
            background: rgba(255, 255, 255, 0.7);
        }
        .player-list-title {
            color: var(--accent-blue);
            margin-bottom: 10px;
            text-align: center;
        }
        .players {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .player {
            padding: 3px 8px;
            background: rgba(79, 195, 247, 0.1);
            border-radius: 3px;
        }
        
        /* 底部导航 */
        .bottom-nav {
			display: grid;
			justify-items: center;
			grid-template-columns: repeat(5, 1fr);
			gap: 8px;
			margin-top: 25px;
		}
        .nav-item {
            padding: 5px 5px;
            text-align: center;
            /* border: 1px solid var(--border-blue);
            border-radius: 5px;
            font-size: 0.9rem;
            background: rgba(255, 255, 255, 0.8); */
        }
		
		/* 小红点 */
        .nav-item.has-notification::after {
            content: "●";
            position: absolute;
            /* top: 5px;
            right: 5px; */
            color: #e53935;
            font-size: 0.7rem;
        }
        
        /* 分隔线 */
        .divider {
            height: 1px;
            background: linear-gradient(to right, transparent, var(--accent-blue), transparent);
            margin: 5px 15%;
        }
        
        /* 响应式调整 */
        @media (max-width: 480px) {
            .item {
                <!-- flex: 1 0 100%; -->
            }
            .bottom-nav {
                grid-template-columns: repeat(5, 1fr);
            }
        }
		
/* 个人属性 紧凑布局容器 */
        .compact-container {
            max-width: 600px;
            margin: 0 auto;
            padding-bottom: 70px; /* 为底部按钮留空间 */
        }
        
        /* 顶部信息栏 */
        .status-bar {
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            margin-bottom: 8px;
            border-bottom: 1px dashed var(--accent-cyan);
            font-size: 0.95rem;
            color: var(--ink-light);
        }
        
        /* 角色信息区 */
        .character-header {
            display: flex;
            align-items: center;
            padding: 12px 0;
            margin-bottom: 15px;
            border-bottom: 1px solid var(--border-blue);
        }
        .avatar {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-family: "Ma Shan Zheng", cursive;
            font-size: 1.8rem;
            margin-right: 15px;
            flex-shrink: 0;
        }
        .character-info {
            flex: 1;
        }
        .character-name {
            font-family: "Ma Shan Zheng", cursive;
            font-size: 1.6rem;
            color: var(--ink-dark);
            margin-bottom: 3px;
        }
        .character-details {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 5px;
        }
        .detail-tag {
            padding: 3px 8px;
            background: rgba(79, 195, 247, 0.15);
            border-radius: 12px;
            font-size: 0.9rem;
        }
        
        /* 资源卡片 */
        .resource-cards {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
            margin-bottom: 0px;
        }
        .resource-card {
            padding: 10px 5px;
            border: 1px solid var(--border-blue);
            border-radius: 8px;
            text-align: center;
            background: rgba(255, 255, 255, 0.8);
        }
        .resource-value {
            font-weight: bold;
            color: var(--accent-blue);
            margin-top: 3px;
            font-size: 1.1rem;
        }
        
        /* 属性面板 */
        .attributes-panel {
            background: white;
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 15px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.05);
        }
        .panel-title {
            color: var(--accent-blue);
            margin-bottom: 12px;
            padding-bottom: 8px;
            border-bottom: 1px dashed var(--accent-cyan);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        /* 属性网格 */
        .attributes-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
        }
        .attribute-item {
            padding: 8px 5px;
        }
        .attribute-name {
            font-size: 0.9rem;
            color: var(--ink-light);
            margin-bottom: 2px;
        }
        .attribute-value {
            font-weight: bold;
            font-size: 1.05rem;
        }
        
        /* 装备区 */
        .equipment-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
            margin: 12px 0;
        }
        .equipment-item {
            padding: 10px;
            border: 1px solid var(--border-blue);
            border-radius: 8px;
            text-align: center;
            background: rgba(255, 255, 255, 0.9);
        }
        .equipment-name {
            font-weight: bold;
            margin-bottom: 5px;
            font-size: 0.95rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .equipment-grade {
            display: inline-block;
            padding: 2px 6px;
            background: rgba(79, 195, 247, 0.15);
            border-radius: 4px;
            font-size: 0.8rem;
            margin-bottom: 8px;
        }
        .equipment-action {
            display: block;
            padding: 4px;
            background: rgba(30, 136, 229, 0.1);
            border-radius: 4px;
            color: var(--accent-blue);
            font-size: 0.9rem;
        }
        
        /* 技能区 */
        .skills-section {
            margin-top: 20px;
        }
        .skills-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
        }
        .skill-item {
            padding: 10px;
            border: 1px solid var(--border-blue);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.9);
        }
        .skill-name {
            font-weight: bold;
            margin-bottom: 5px;
            font-size: 0.95rem;
        }
        .skill-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .skill-level {
            padding: 2px 6px;
            background: rgba(79, 195, 247, 0.15);
            border-radius: 4px;
            font-size: 0.85rem;
			margin-right: 5px;
        }
        .skill-action {
            padding: 3px 8px;
            background: rgba(30, 136, 229, 0.1);
            border-radius: 4px;
            color: var(--accent-blue);
            font-size: 0.85rem;
        }
        
        /* 底部操作栏 */
        .action-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            padding: 10px;
            border-top: 1px solid var(--border-blue);
            display: flex;
            justify-content: space-around;
            box-shadow: 0 -3px 10px rgba(0,0,0,0.08);
        }
        .action-button {
            padding: 12px 20px;
            text-align: center;
            border-radius: 8px;
            font-weight: bold;
            color: white;
            background: var(--accent-blue);
            flex: 1;
            margin: 0 5px;
            box-shadow: 0 3px 6px rgba(30, 136, 229, 0.3);
        }
        .action-button.secondary {
            background: var(--ink-light);
        }
        
        /* 响应式调整 */
        @media (max-width: 480px) {
            .resource-cards {
                grid-template-columns: repeat(2, 1fr);
            }
            .attributes-grid {
                grid-template-columns: repeat(4, 1fr);
            }
			
            .equipment-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .skills-grid {
                grid-template-columns: 1fr;
            }
            .character-header {
				/* 个人属性名称自动调节排版 */
               /*  flex-direction: column; */
                align-items: flex-start;
            }
            .avatar {
                margin-bottom: 10px;
            }
        }
        
        /* 紧凑布局调整 */
        .compact-section {
            margin-bottom: 15px;
            background: white;
            border-radius: 12px;
            padding: 5px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.05);
        }
        .compact-title {
            color: var(--accent-blue);
            margin-bottom: 12px;
            padding-bottom: 8px;
            border-bottom: 1px dashed var(--accent-cyan);
        }
		
	/* 道具颜色大全 */
	/* 
		#555555（灰）→ #02ac02（绿）→ #0093E8（蓝）→ #ff9800（黄）→ #da00ff（紫）→ #ff0000（红）→ #00ead4（青）→ #fe37a3（粉）→ #cf0000（炫紫）→ #000000（炫黑）
		
		对应品质名称：
		普通 → 良好 → 稀有 → 史诗 → 传奇 → 神话 → 天工 → 辉煌 → 虚空 → 神圣 → 起源
	*/
	.hui{
		color: #555555;
	}
	.lv{
		color: #02ac02;
	}
	.lan{
		color: #0093E8;
	}
	.huang{
		color: #ff9800;
	}
	.zi{
		color: #da00ff;
	}
	.hong{
		color: #ff0000;
	}
	.qing{
		color: #00ead4;
	}
	.fen{
		color: #fe37a3;
	}
	.xlv{
		color: #cf0000;
	}
	.xzi{
		color: #000000;
	}
	/* 按品质划分 */
	.ys1{
		color: #555555;
	}
	.ys2{
		color: #02ac02;
	}
	.ys3{
		color: #0093E8;
	}
	.ys4{
		color: #ff9800;
	}
	.ys5{
		color: #da00ff;
	}
	.ys6{
		color: #ff0000;
	}
	.ys7{
		color: #00ead4;
	}
	.ys8{
		color: #fe37a3;
	}
	.ys9{
		color: #cf0000;
	}
	.ys10{
		color: #000000;
	}
	
	/* 雷云 */
	.lei{
		position: absolute;
		top: -18px;
		left: 50%;
		transform: translateX(-50%);
		color: #ffe500;
		font-size: 13px;
		font-weight: bold;
		background-color: #000000;
		padding: 2px 5px;
		border-radius: 3px;
		z-index: 10;
		white-space: nowrap;
		
	}
	
	/* 数字转化标签 */
	.zh {
		transition: all 0.3s ease;
	}
	
	.jc{
		font-weight: bold;  
	}
	.w22{
		width: 22px;
	}
	
	/* 聊天msg */
	.ltmsg{
		max-height: 60px; overflow-x: hidden; overflow-y: auto; font-size: 12px; 
	}
	/* 系统背景 */
	.xitong{
		background-color: red; border-radius: 2px; color: #ffffff;
	}
	/* 玩家背景 */
	.wanjia{
		background-color: #FF9800; border-radius: 2px; color: #ffffff;
	}
	.wjtime{
		font-size: 10px; color: #795548;
	}