* { margin:0; padding:0; box-sizing:border-box; }
html,body { width:100%; height:100%; overflow:hidden; background:#0a0a0c;
  font-family:"Microsoft YaHei","PingFang SC",sans-serif; color:#e8e2d5; user-select:none; }
canvas { display:block; }

.overlay { position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at center, rgba(20,12,12,.82), rgba(0,0,0,.95)); }

/* ===== 主菜单 ===== */
.menu-box { width:520px; max-width:92vw; padding:42px 46px; text-align:center;
  background:linear-gradient(160deg, rgba(35,24,20,.96), rgba(12,10,10,.98));
  border:1px solid #5a3a2a; box-shadow:0 0 60px rgba(180,60,30,.25), inset 0 0 40px rgba(0,0,0,.6);
  border-radius:6px; }
.game-title { font-size:58px; letter-spacing:14px; color:#e8c98a; text-indent:14px;
  text-shadow:0 0 24px rgba(220,120,40,.55), 0 3px 0 #2a1408; }
.subtitle { font-size:12px; letter-spacing:6px; color:#9a6a4a; margin:8px 0 26px; }
.menu-row { display:flex; align-items:center; margin:10px 0; gap:10px; }
.menu-row label { width:74px; text-align:right; color:#c9a06a; font-size:14px; }
.menu-row input { flex:1; background:#151110; border:1px solid #4a3024; color:#f0e6d2;
  padding:9px 12px; border-radius:4px; font-size:15px; outline:none; }
.menu-row input:focus { border-color:#c9803a; }
.big-btn { display:block; width:100%; margin:14px 0 0; padding:14px; font-size:19px; letter-spacing:6px;
  color:#fff2dc; cursor:pointer; border:1px solid #a05028; border-radius:4px;
  background:linear-gradient(180deg,#8a3a1c,#5a1e0e);
  text-shadow:0 1px 2px #000; transition:.15s; }
.big-btn:hover { background:linear-gradient(180deg,#b04e26,#7a2a12); box-shadow:0 0 18px rgba(220,110,40,.45); transform:translateY(-1px); }
.big-btn.ghost { background:linear-gradient(180deg,#3a3f4a,#22262e); border-color:#5a6678; }
.big-btn.ghost:hover { background:linear-gradient(180deg,#4c5464,#2c323d); box-shadow:0 0 18px rgba(120,160,220,.3); }
.big-btn.gold { background:linear-gradient(180deg,#b08a30,#6e4f12); border-color:#e0b850; }
.big-btn.gold:hover { box-shadow:0 0 20px rgba(240,200,80,.55); }
.big-btn.blood { background:linear-gradient(180deg,#8a1c1c,#4a0c0c); border-color:#c04030; }
.big-btn small { display:block; font-size:11px; letter-spacing:2px; opacity:.75; margin-top:3px; }
.link-btn { margin-top:14px; background:none; border:none; color:#b08a5a; cursor:pointer; font-size:13px;
  transition:.15s; }
.link-btn:hover { color:#e8c98a; text-decoration:underline;
  box-shadow:0 0 12px rgba(255,176,80,.3); transform:translateY(-1px); }
.help { margin-top:24px; padding-top:16px; border-top:1px dashed #4a3024;
  font-size:12.5px; line-height:1.9; color:#9c8a72; text-align:left; }
.help b { color:#d8a85e; }

/* ===== HUD ===== */
#hud { position:fixed; inset:0; z-index:10; pointer-events:none; }
#crosshair { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  color:#ffd070; font-size:22px; text-shadow:0 0 2px rgba(255,208,112,.95), 0 0 6px rgba(255,176,80,.5);
  transition:transform .12s ease-out, color .12s ease-out; }
/* 准星命中反馈：命中放大变白 / 击杀放大变红（150ms 后由 JS 移除） */
#crosshair.xh-hit { transform:translate(-50%,-50%) scale(1.4); color:#ffffff; }
#crosshair.xh-kill { transform:translate(-50%,-50%) scale(1.8); color:#ff4040; }
#topbar { position:absolute; top:14px; left:50%; transform:translateX(-50%);
  display:flex; gap:18px; font-size:14px; letter-spacing:2px; color:#e8d8b8;
  background:rgba(10,8,6,.55); padding:6px 20px; border:1px solid rgba(160,120,60,.4); border-radius:3px;
  align-items:center; }
#soundBtn, #qualityBtn, #settingsBtn { background:transparent; border:none; cursor:pointer; font-size:16px; line-height:1;
  padding:0 2px; color:#e8d8b8; opacity:.85; pointer-events:auto; }
#soundBtn:hover, #qualityBtn:hover, #settingsBtn:hover { opacity:1; transform:scale(1.12); }
#qualityBtn { font-size:12px; letter-spacing:1px; }

#destiny-panel { position:absolute; top:12px; right:16px; display:flex; flex-direction:column; gap:8px; }
.dp-item { display:flex; align-items:center; gap:8px; background:rgba(10,8,6,.6);
  border:1px solid rgba(180,140,70,.45); border-radius:4px; padding:5px 12px 5px 6px; font-size:18px; font-weight:bold; }
.dp-icon { width:28px; height:28px; line-height:28px; text-align:center; border-radius:50%; font-size:15px; }
.dp-icon.tianming { background:radial-gradient(circle,#ffd98a,#a06a1a); color:#3a1c00; box-shadow:0 0 10px rgba(255,200,90,.7); }
.dp-icon.ticket { background:radial-gradient(circle,#ff9a8a,#8a2020); color:#fff; box-shadow:0 0 10px rgba(255,80,60,.6); }

#vitals { position:absolute; left:18px; bottom:22px; width:250px; }
.bar-row { display:flex; align-items:center; gap:8px; margin:5px 0; }
.bar-label { width:34px; font-size:12px; color:#cbb896; }
.bar { flex:1; height:13px; background:rgba(0,0,0,.6); border:1px solid rgba(160,130,80,.35); border-radius:2px; }
.bar-fill { height:100%; border-radius:2px; transition:width .2s; }
/* 血条：红→暗红渐变 + 微发光；饱食条：橙→黄渐变 + 微发光 */
.bar-fill.hp { background:linear-gradient(90deg,#e03a2a,#7a0e0e);
  box-shadow:0 0 8px rgba(224,58,42,.5), inset 0 0 4px rgba(255,170,150,.35); }
.bar-fill.food { background:linear-gradient(90deg,#e07818,#f0c838);
  box-shadow:0 0 8px rgba(224,150,40,.45), inset 0 0 4px rgba(255,240,180,.35); }
.bar-fill.shield { background:linear-gradient(90deg,#1a4a7a,#3aa8e0);
  box-shadow:0 0 8px rgba(58,168,224,.4); }
.bar-row span:last-child { width:34px; font-size:12px; text-align:right; }

#skillHints { position:absolute; left:50%; bottom:96px; transform:translateX(-50%); display:flex; gap:14px; }
.skill-hint { background:rgba(10,8,6,.65); border:1px solid rgba(180,140,70,.4); border-radius:4px;
  padding:4px 12px; font-size:12.5px; color:#cbb896; text-align:center; min-width:74px; }
.skill-hint b { color:#ffd98a; display:block; font-size:13px; }
.skill-hint.cool { color:#666; }
.skill-hint.ready { box-shadow:0 0 10px rgba(255,200,90,.35); border-color:#c99a4a; }

#hotbar { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); display:flex; gap:6px; }
.slot { width:58px; height:58px; background:rgba(12,10,8,.66); border:2px solid rgba(150,120,70,.35);
  border-radius:4px; position:relative; text-align:center; padding-top:4px; }
.slot.active { border-color:#ffd070; box-shadow:0 0 8px rgba(255,200,60,.5); }
.slot .slot-key { position:absolute; top:2px; left:5px; font-size:10px; color:#9a8a6a; }
.slot .slot-icon { font-size:24px; line-height:30px; }
.slot .slot-icon-img { width:36px; height:36px; object-fit:contain; margin-top:2px;
  filter:drop-shadow(1px 2px 2px rgba(0,0,0,.7)); }
.slot .slot-count { position:absolute; right:4px; bottom:2px; font-size:12px; font-weight:bold; color:#f0e2c0;
  text-shadow:1px 1px 0 #000; }
.slot .slot-cd { position:absolute; inset:0; background:rgba(0,0,0,.62); color:#ffb070; font-size:12px;
  display:flex; align-items:center; justify-content:center; border-radius:2px; }

#toasts { position:absolute; top:64px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column;
  align-items:center; gap:6px; }
.toast { background:rgba(15,10,8,.8); border-left:3px solid #d89040; padding:7px 18px; font-size:14px;
  color:#f4e4c8; border-radius:2px; animation:toastIn .25s ease-out; }
.toast.gold { border-color:#ffd070; color:#ffe6a8; }
.toast.red { border-color:#e04030; color:#ffb0a8; }
.toast.purple { border-color:#b060e0; color:#e0b8ff; }
/* 入场：从右侧滑入 + 淡入（出场由 JS 淡出） */
@keyframes toastIn { from { opacity:0; transform:translateX(60px); } to { opacity:1; transform:translateX(0); } }

#hurtVignette { position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(180,10,0,.55)); transition:opacity .35s; }

.hint-box { padding:22px 46px; font-size:22px; letter-spacing:6px; color:#e8d8b8;
  background:rgba(10,8,6,.72); border:1px solid rgba(180,140,70,.4); border-radius:5px; }

/* 暂停页容器：提示文本与设置按钮垂直居中 */
.pause-box { display:flex; flex-direction:column; align-items:center; }

/* 暂停页在 #hud（pointer-events:none）内，必须重新启用鼠标事件，
   否则点击穿透到 canvas 直接重锁指针，设置按钮永远点不到 */
#clickHint { pointer-events:auto; }

/* ===== 轮盘 ===== */
.wheel-wrap { text-align:center; padding:26px 40px; }
.wheel-wrap h2 { color:#ffd98a; letter-spacing:8px; font-size:30px; margin-bottom:4px; }
.wheel-sub { font-size:12px; letter-spacing:3px; color:#a08a5a; }
.wheel-stage { position:relative; width:460px; height:460px; margin:16px auto; }
#wheelPointer { position:absolute; top:-8px; left:50%; transform:translateX(-50%);
  color:#ff4020; font-size:34px; z-index:5; text-shadow:0 0 8px #000; }
.wheel-btns { display:flex; gap:12px; justify-content:center; align-items:flex-start; }
.wheel-btns .big-btn { width:200px; margin:0; padding:11px; font-size:16px; letter-spacing:3px; }
#wheelResult { margin-top:14px; min-height:30px; font-size:15px; color:#ffe2a0; }
.result-card { display:inline-block; margin:3px; padding:6px 14px; border-radius:3px; font-size:13.5px;
  background:rgba(0,0,0,.45); border:1px solid; }
.r-common { color:#cfcfcf; border-color:#888; }
.r-uncommon { color:#8aff8a; border-color:#3a3; }
.r-rare { color:#7ec8ff; border-color:#39a; }
.r-epic { color:#d08aff; border-color:#a3c; }
.r-legend { color:#ffd060; border-color:#e8a020; box-shadow:0 0 10px rgba(240,180,60,.4); }
.r-myth { color:#ff7ad9; border-color:#ff3aa8; box-shadow:0 0 14px rgba(255,60,160,.6); animation:mythGlow 1s infinite alternate; }
@keyframes mythGlow { to { box-shadow:0 0 22px rgba(255,60,160,.9); } }

/* ===== 背包 ===== */
.inv-box { width:640px; max-width:94vw; padding:28px 34px; text-align:center; }
.inv-box h2 { color:#e8c98a; letter-spacing:6px; margin-bottom:18px; }
#invGrid { display:grid; grid-template-columns:repeat(8,1fr); gap:7px; }
.inv-cell { aspect-ratio:1; background:rgba(0,0,0,.4); border:1px solid rgba(150,120,70,.3);
  border-radius:3px; position:relative; cursor:pointer; display:flex; flex-direction:column;
  align-items:center; justify-content:center; }
.inv-cell:hover { border-color:#d8a850; }
.inv-cell .ic-icon { font-size:24px; }
.inv-cell .ic-icon-img { width:44px; height:44px; object-fit:contain;
  filter:drop-shadow(1px 2px 2px rgba(0,0,0,.7)); }
.inv-cell .ic-count { position:absolute; right:3px; bottom:1px; font-size:11px; font-weight:bold; }
.inv-cell .ic-rarity { position:absolute; inset:0; border-radius:3px; pointer-events:none; }
.inv-detail { margin:16px 0 4px; min-height:56px; font-size:13.5px; line-height:1.8; color:#cbb896;
  background:rgba(0,0,0,.35); border-radius:4px; padding:8px 12px; text-align:left; }
.inv-detail b { color:#ffd98a; }

/* ===== 死亡 ===== */
.death-box { text-align:center; padding:40px 56px; }
.death-title { font-size:72px; letter-spacing:20px; color:#c81818; text-indent:20px;
  text-shadow:0 0 40px rgba(220,0,0,.7); margin-bottom:18px; }
#deathStats { color:#b09a80; margin-bottom:14px; line-height:2; }
.death-contact { color:#8a94a8; font-size:13px; margin-bottom:26px; letter-spacing:.5px; }

/* ===== 联机锁定 / 基地建造 ===== */
.multi-calc { margin-top:10px; max-width:520px; color:#9a9284; font-size:12.5px; line-height:1.8;
  background:rgba(20,16,10,.55); border:1px dashed rgba(160,130,80,.35); border-radius:6px; padding:8px 12px; }
.multi-calc b { color:#ffd870; }
.big-btn.locked { filter:grayscale(.8) brightness(.6); cursor:not-allowed; }
.big-btn.locked:hover { box-shadow:none; }
.build-desc { color:#9a9080; font-size:11.5px; line-height:1.5; margin:2px 0; }
.build-status { color:#c0a86a; font-size:12.5px; margin:4px 0 8px; letter-spacing:.5px; }

/* ===== 聊天 ===== */
#chatBox { position:absolute; left:16px; bottom:96px; width:360px; pointer-events:auto; }
#chatLog { max-height:150px; overflow:hidden; font-size:12.5px; line-height:1.7;
  text-shadow:1px 1px 2px #000; margin-bottom:4px; }
.chat-me { color:#ffd98a; } .chat-other { color:#cfe0ff; } .chat-sys { color:#e08070; }
#chatInput { width:100%; background:rgba(10,8,6,.75); border:1px solid rgba(180,140,70,.4);
  color:#f0e6d2; padding:6px 10px; border-radius:3px; outline:none; display:none; }
#chatBox.active #chatInput { display:block; }
#chatBox.active #chatLog { opacity:.55; }

/* 滚动条隐藏 */
::-webkit-scrollbar { width:0; }

/* ===== NPC 对话 ===== */
#talkHint { position:absolute; left:50%; bottom:26%; transform:translateX(-50%);
  background:rgba(10,8,6,.72); border:1px solid rgba(255,216,112,.55); color:#ffd870;
  padding:6px 16px; border-radius:4px; font-size:14px; letter-spacing:1px;
  text-shadow:1px 1px 2px #000; pointer-events:none; z-index:8; }
.dlg-box { width:440px; max-width:92vw; background:rgba(16,12,8,.94);
  border:1px solid rgba(216,168,80,.65); border-radius:6px; padding:22px 26px;
  box-shadow:0 0 44px rgba(0,0,0,.85), inset 0 0 24px rgba(120,80,20,.12);
  margin-top:22vh; }
.dlg-name { font-size:18px; font-weight:bold; color:#ffd870; letter-spacing:2px;
  border-bottom:1px solid rgba(216,168,80,.35); padding-bottom:10px; margin-bottom:14px; }
.dlg-name::before { content:'💬 '; }
.dlg-text { font-size:14.5px; line-height:2; color:#e8dcc4; min-height:88px; text-align:left; }
.dlg-btns { display:flex; justify-content:space-between; margin-top:14px; }

/* ===== 坊市交易 ===== */
.shop-panel { width:560px; max-width:94vw; max-height:86vh; overflow-y:auto; }
.shop-gem { font-size:15px; color:#8fd8ff; margin:6px 0 2px; }
.shop-gem b { color:#ffd870; font-size:17px; }
.shop-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin:8px 0 14px; }
.shop-item { background:rgba(30,24,16,.85); border:1px solid rgba(180,140,80,.35);
  border-radius:5px; padding:8px 4px; display:flex; flex-direction:column; align-items:center; gap:4px; }
.shop-ic { width:40px; height:40px; image-rendering:pixelated; }
.shop-ic-emoji { font-size:30px; line-height:40px; }
.shop-name { font-size:12px; color:#e8dcc4; text-align:center; line-height:1.4; }
.shop-price { font-size:12.5px; color:#8fd8ff; }
.shop-btn { background:linear-gradient(180deg,#6a4a20,#4a3212); color:#ffd870;
  border:1px solid #a88040; border-radius:4px; padding:3px 16px; font-size:13px;
  cursor:pointer; letter-spacing:2px; }
.shop-btn:hover:not(:disabled) { background:linear-gradient(180deg,#8a6030,#5a4020); }
.shop-btn:disabled { opacity:.35; cursor:not-allowed; }
.shop-btn.sell { background:linear-gradient(180deg,#2a4a3a,#1a3026); color:#8fe0b0; border-color:#4a8a60; }
.shop-btn.sell:hover { background:linear-gradient(180deg,#3a5a4a,#22382c); }
.shop-empty { grid-column:1/-1; color:#8a8070; font-size:13px; text-align:center; padding:14px 0; }

/* ===== 小地图 ===== */
#minimap { position:absolute; right:18px; bottom:22px; width:140px; height:140px;
  border-radius:50%; box-shadow:0 0 18px rgba(0,0,0,.6); z-index:9; pointer-events:none; }

/* ===== 天命书（每日任务 / 成就） ===== */
.quest-box { width:520px; max-width:94vw; padding:26px 32px; text-align:center; }
.quest-box h2 { color:#ffd98a; letter-spacing:8px; font-size:26px; margin-bottom:12px; }
.quest-tabs { display:flex; gap:8px; justify-content:center; margin-bottom:12px; }
.quest-tab { background:rgba(0,0,0,.4); border:1px solid rgba(180,140,70,.4); color:#b09a70;
  padding:6px 26px; font-size:14px; letter-spacing:3px; cursor:pointer; border-radius:4px; }
.quest-tab.active { color:#ffd870; border-color:#d8a850; box-shadow:0 0 10px rgba(255,200,90,.3); }
.quest-list { max-height:46vh; overflow-y:auto; display:flex; flex-direction:column; gap:8px;
  margin-bottom:10px; }
.quest-item { background:rgba(0,0,0,.35); border:1px solid rgba(160,130,80,.3); border-radius:5px;
  padding:9px 14px; text-align:left; }
.quest-item .q-text { font-size:14.5px; color:#f0e2c0; letter-spacing:1px; }
.quest-item .q-prog { font-size:12px; color:#9a8a6a; margin-top:3px; }
.quest-item.done { border-color:rgba(120,200,120,.45); }
.quest-item.done .q-text { color:#a8e0a0; }
.quest-item.achv:not(.done) { opacity:.62; }
.quest-item.achv.done { border-color:rgba(255,208,112,.55); box-shadow:0 0 10px rgba(255,200,90,.18); }
.quest-item.achv.done .q-text { color:#ffd870; }
.q-empty { color:#8a8070; font-size:13px; text-align:center; padding:16px 0; }

/* 语言切换按钮：主菜单右上角 */
.menu-box { position:relative; }
.lang-btn { position:absolute; top:12px; right:16px; font-size:13px; letter-spacing:1px; }

/* ===== 毛玻璃面板：游戏内弹窗统一质感（背包/天命书/商店/基地建造/工作台/轮盘/死亡界面） ===== */
.wheel-wrap, .inv-box, .quest-box, .panel.shop-panel, .death-box, .panel.settings-box {
  background: rgba(10, 10, 15, 0.55);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
}

/* 面板入场动效：JS uiOpen 给 overlay 加 .open 后，内部面板淡入并放大 */
#roulette .wheel-wrap, #inventory .inv-box, #shop .panel, #build .panel,
#station .panel, #questPanel .quest-box, #death .death-box, #dialogue .dlg-box {
  opacity: 0; transform: scale(.95);
  transition: opacity .2s ease-out, transform .2s ease-out;
}
#roulette.open .wheel-wrap, #inventory.open .inv-box, #shop.open .panel, #build.open .panel,
#station.open .panel, #questPanel.open .quest-box, #death.open .death-box, #dialogue.open .dlg-box,
#settingsPanel.open .panel {
  opacity: 1; transform: scale(1);
}

/* ===== 设置面板 ===== */
#settingsPanel .panel {
  opacity: 0; transform: scale(.95);
  transition: opacity .2s ease-out, transform .2s ease-out;
}
.settings-box { min-width: 320px; padding: 20px 24px; }
.settings-box h2 { margin-top: 0; }
.set-row { display: flex; align-items: center; justify-content: space-between; margin: 14px 0; }
.set-row label { font-size: 14px; color: #d8c8a8; letter-spacing: 1px; }
.set-btns { display: flex; gap: 6px; }
.set-btns button {
  padding: 6px 12px; font-size: 12px; letter-spacing: 1px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px; color: #ccc; cursor: pointer; transition: all .15s;
}
.set-btns button:hover { background: rgba(255,255,255,0.12); }
.set-btns button.active {
  background: linear-gradient(180deg, #b08a30, #6e4f12);
  border-color: #e0b850; color: #fff;
  box-shadow: 0 0 10px rgba(240,200,80,.3);
}
.set-toggle {
  min-width: 52px; padding: 6px 14px; font-size: 12px; letter-spacing: 1px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px; color: #999; cursor: pointer; transition: all .15s;
}
.set-toggle.on {
  background: linear-gradient(180deg, #b08a30, #6e4f12);
  border-color: #e0b850; color: #fff;
  box-shadow: 0 0 10px rgba(240,200,80,.3);
}

/* ===== 加载画面：旋转 logo + 进度条 + 背景渐变动画 ===== */
#loading { background:linear-gradient(135deg,#0a0a12,#1c0e12,#0a0a12); background-size:300% 300%;
  animation:loadBg 8s ease-in-out infinite; }
@keyframes loadBg { 0%,100% { background-position:0% 0; } 50% { background-position:100% 100%; } }
.loading-box { text-align:center; }
.loading-logo { position:relative; width:72px; height:72px; margin:0 auto 22px; }
.loading-logo::before { content:''; position:absolute; inset:0; border-radius:50%;
  border:3px solid transparent; border-top-color:#ffb050; border-right-color:rgba(255,176,80,.35);
  animation:loadSpin 1.1s linear infinite; }
.loading-logo::after { content:''; position:absolute; inset:14px; border-radius:50%;
  border:2px solid transparent; border-bottom-color:#ffd070; border-left-color:rgba(255,208,112,.3);
  animation:loadSpin .8s linear infinite reverse; }
.loading-core { position:absolute; inset:29px; border-radius:50%;
  background:radial-gradient(circle,#ffd070,#b05818);
  box-shadow:0 0 18px rgba(255,180,70,.8); animation:loadPulse 1.2s ease-in-out infinite alternate; }
@keyframes loadSpin { to { transform:rotate(360deg); } }
@keyframes loadPulse { from { transform:scale(.85); opacity:.75; } to { transform:scale(1.05); opacity:1; } }
.loading-bar { width:240px; height:6px; margin:18px auto 0; border-radius:3px;
  background:rgba(255,255,255,.08); overflow:hidden; }
.loading-bar-fill { height:100%; width:30%; border-radius:3px;
  background:linear-gradient(90deg,#b05818,#ffd070); box-shadow:0 0 8px rgba(255,190,80,.6);
  animation:loadSlide 1.3s ease-in-out infinite; }
@keyframes loadSlide { 0% { transform:translateX(-110%); } 100% { transform:translateX(360%); } }