/* 主题：哥布林协会 - 毛玻璃白透明风格 */
:root{
  --bg-img: radial-gradient(1200px 800px at 20% 10%, rgba(97, 219, 114, .08), transparent 60%),
            radial-gradient(1000px 700px at 80% 30%, rgba(116, 185, 255, .08), transparent 60%),
            linear-gradient(180deg, #0b0f12 0%, #0e1418 100%);
  --glass-bg: rgba(255,255,255,.16);
  --glass-border: rgba(255,255,255,.35);
  --text-primary: #e7f5ee;
  --text-secondary: #b8c6bf;
  --accent: #79e36f;
  --accent-2: #7ac7ff;
  --shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.2);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  color: var(--text-primary);
  background: var(--bg-img);
  background-attachment: fixed;
}

.container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
  position: relative;
  z-index: 1;
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  will-change: transform, opacity;
  transition: transform .5s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease;
  animation: dropIn .7s cubic-bezier(.2,.7,.2,1) both;
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  padding: 12px 18px;
  box-shadow: var(--shadow);
}
.brand{
  display:flex; align-items:center; gap:12px;
}
.hamburger{ width:34px; height:34px; border-radius:9px; border:1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.12); display:grid; place-items:center; cursor:pointer; transition: filter .2s ease, transform .2s ease }
.hamburger:hover{ filter:brightness(1.05); transform: translateY(-1px) }
.hamburger span{ position:relative; display:block; width:18px; height:2px; background: var(--text-primary) }
.hamburger span::before, .hamburger span::after{ content:""; position:absolute; left:0; width:18px; height:2px; background: var(--text-primary) }
.hamburger span::before{ top:-6px }
.hamburger span::after{ top:6px }
.brand-badge{
  width:36px; height:36px; border-radius:9px;
  background: linear-gradient(135deg, rgba(121, 227, 111,.9), rgba(122, 199, 255,.9));
  box-shadow: 0 8px 18px rgba(121,227,111,.35), inset 0 2px 6px rgba(255,255,255,.5);
  animation: float 6s ease-in-out infinite;
}
.brand-title{font-weight:800; letter-spacing:.5px}
.brand-sub{color:var(--text-secondary); font-size:12px}

.nav-links{display:flex; gap:10px; flex-wrap:wrap}
.nav-links a{
  color: var(--text-primary); text-decoration:none; font-weight:600;
  background: rgba(255,255,255,.08);
  padding: 8px 12px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  transition: all .15s ease;
}
.nav-links a:hover{ transform: translateY(-1px); background: rgba(255,255,255,.16) }
.nav-links a{ position:relative; overflow:hidden }
.nav-links a::after{ content:""; position:absolute; left:10px; right:10px; bottom:6px; height:2px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform .25s ease }
.nav-links a:hover::after{ transform:scaleX(1) }

.hero{
  display:grid; grid-template-columns: 1.2fr 1fr; gap:20px; align-items:stretch;
  margin-top: 18px;
}
.card{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  padding: 22px;
  will-change: transform, opacity, box-shadow;
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease, background .3s ease;
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  box-shadow: var(--shadow);
}
.card h2{ margin: 0 0 8px 0 }
.card p{ margin: 6px 0; color: var(--text-secondary) }

.card:hover{ transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,.45) }

.badges{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
.badge{font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.1)}

.cta{
  display:flex; gap:10px; margin-top:14px; flex-wrap:wrap
}
.btn{
  appearance:none; border:none; cursor:pointer; font-weight:700;
  padding:10px 14px; border-radius:12px; color:#0d1116;
  background: linear-gradient(180deg, #93f38d, #4de041);
  box-shadow: 0 10px 18px rgba(121,227,111,.35);
  will-change: transform, box-shadow, filter;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  animation: pulse 2.4s ease-in-out infinite;
}
.btn.alt{ color:#0d1116; background: linear-gradient(180deg, #a9d9ff, #66b8ff) }
.btn:hover{ filter: brightness(1.05); transform: translateY(-2px) }

.grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin-top:18px }
.grid{ perspective: 900px }
.tile{ padding:16px; border-radius:14px; border:1px dashed rgba(255,255,255,.25); background:rgba(255,255,255,.08); transition: transform .3s ease, background .3s ease, border-color .3s ease }
.tile h4{ margin:0 0 6px 0 }
.tile p{ margin:0; color:var(--text-secondary) }
.tile:not(.tilt):hover{ transform: translateY(-3px) scale(1.01) }

/* Showcase thumbnail */
.thumb{ position: relative; width:100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; border:1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); margin-bottom:10px }
.thumb img{ width:100%; height:100%; object-fit: cover; display:block; transform: scale(1); transition: transform .35s ease, filter .35s ease }
.tile:hover .thumb img{ transform: scale(1.06) }

.section-title{ margin:22px 0 10px 0; font-weight:800 }
.section-title{ position:relative; padding-bottom:6px }
.section-title::after{ content:""; position:absolute; left:0; bottom:0; width:72px; height:3px; border-radius:2px; background: linear-gradient(90deg, var(--accent), var(--accent-2)) }

.form{ display:grid; gap:10px; margin-top:8px }
.input, .textarea{
  width:100%; color: var(--text-primary);
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.25);
  border-radius:10px; padding:10px 12px;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.textarea{ min-height:110px; resize:vertical }
.input:focus, .textarea:focus{ outline:none; border-color: rgba(122,199,255,.8); box-shadow: 0 0 0 4px rgba(122,199,255,.15) }

.footer{ margin:24px 0; text-align:center; color:var(--text-secondary); font-size:13px }

body::before{
  content:"";
  position: fixed;
  inset: -20% -20% -20% -20%;
  background:
    radial-gradient(600px 400px at 15% 20%, rgba(121,227,111,.18), transparent 60%),
    radial-gradient(700px 500px at 85% 30%, rgba(122,199,255,.18), transparent 60%),
    radial-gradient(900px 700px at 50% 80%, rgba(255,255,255,.06), transparent 60%);
  filter: blur(60px) saturate(120%);
  pointer-events: none;
  z-index: 0;
  opacity: .35;
  animation: bgMove 28s ease-in-out infinite alternate;
}

.reveal{ opacity:0; transform: translateY(12px) scale(.98); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1) }
.reveal.show{ opacity:1; transform: none }

/* Glow title */
.glow-title{
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 18px rgba(122,199,255,.25);
}

/* Tilt effect */
.tilt{ will-change: transform; transform-style: preserve-3d }

/* Low motion mode */
.low-motion *{ transition-duration: .01s !important; animation-duration: .01s !important }
.low-motion .btn{ animation: none !important; box-shadow: 0 6px 12px rgba(121,227,111,.25) }
.low-motion .brand-badge{ animation: none !important }
.low-motion body::before{ animation: none !important; opacity:.2 }
.low-motion .card{ box-shadow: 0 10px 24px rgba(0,0,0,.28) }
.low-motion .reveal{ transform: none !important; opacity: 1 !important }
.low-motion .tilt{ pointer-events: none }
.low-motion .tile:hover{ transform: none }
.low-motion .tile:hover .thumb img{ transform: none }

/* Modal (Announcement & Admin) */
.modal { 
  position: fixed; 
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex; 
  align-items: center; 
  justify-content: center; 
  padding: 20px; 
  z-index: 1000; 
  opacity: 0; 
  visibility: hidden;
  pointer-events: none; 
  transition: opacity 0.3s ease, visibility 0.3s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal[aria-hidden="false"] { 
  opacity: 1;
  visibility: visible;
  pointer-events: auto; 
}

.modal .overlay{ 
  position: absolute; 
  inset: 0; 
  background: rgba(0, 0, 0, 0.6); 
  cursor: pointer;
  transition: opacity 0.3s ease; 
}

.modal .panel { 
  position: relative; 
  width: 100%; 
  max-width: 600px; 
  max-height: 90vh;
  overflow-y: auto;
  background: rgba(20, 25, 30, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), 
              opacity 0.4s ease;
}

.modal[aria-hidden="false"] .panel {
  transform: translateY(0);
  opacity: 1;
}

.modal-close{ 
  position: absolute; 
  top: 12px; 
  right: 12px; 
  width: 32px; 
  height: 32px; 
  border-radius: 50%; 
  border: 1px solid rgba(255, 255, 255, 0.1); 
  background: rgba(255, 255, 255, 0.1); 
  color: var(--text-primary); 
  font-size: 18px;
  font-weight: 800; 
  cursor: pointer; 
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 10;
}

.modal-close:hover { 
  background: rgba(255, 255, 255, 0.15);
  transform: rotate(90deg);
}

/* Announcement Modal Specific Styles */
#announcementModal .panel {
  background: rgba(15, 20, 25, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4);
}

#annTitleId {
  margin: 0 0 15px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--accent);
}

.modal-content {
  padding: 10px 0;
  line-height: 1.6;
  color: var(--text-secondary);
}

.modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

#dontShowAgain {
  margin-right: 8px;
  accent-color: var(--accent);
}

.modal-footer label {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
}

.modal-footer .btn {
  padding: 8px 20px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #0d1116;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modal-footer .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 15px rgba(121, 227, 111, 0.3);
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .modal .panel {
    max-width: 100%;
    margin: 10px;
  }
  
  .modal-content {
    font-size: 15px;
  }
  
  .modal-footer {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }
  
  .modal-footer .btn {
    width: 100%;
    text-align: center;
  }
}

@keyframes dropIn{ from{ opacity:0; transform: translateY(-12px) } to{ opacity:1; transform: none } }
@keyframes float{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-4px) } }
@keyframes pulse{ 0%,100%{ box-shadow: 0 10px 18px rgba(121,227,111,.35)} 50%{ box-shadow: 0 16px 30px rgba(121,227,111,.55) } }
@keyframes bgMove{ 0%{ transform: translate3d(-2%, 0, 0) scale(1.02) } 50%{ transform: translate3d(2%, 1%, 0) scale(1.04) } 100%{ transform: translate3d(-1%, -1%, 0) scale(1.03) } }

/* Responsive refinements */
@media (max-width: 1100px){
  .grid{ grid-template-columns: repeat(2, 1fr) }
}

@media (max-width: 920px){
  .hero{ grid-template-columns: 1fr }
}

@media (max-width: 680px){
  .container{ padding: 16px }
  .nav{ padding: 10px 12px; gap:10px; flex-wrap: wrap }
  .brand-title{ font-size: 16px }
  .brand-sub{ font-size: 11px }
  .nav-links{ width: 100%; gap:8px }
  .nav-links a{ flex: 1 1 auto; text-align: center; padding: 9px 10px }
  .card{ padding: 16px; border-radius: 14px }
  .section-title{ margin: 14px 0 8px 0 }
  .grid{ grid-template-columns: 1fr; gap:12px; margin-top:14px }
  .tile{ padding: 12px; border-radius: 12px }
  .thumb{ border-radius: 8px }
  .btn{ padding: 12px 16px; border-radius: 12px }
  .input, .textarea{ padding: 12px 12px; border-radius: 10px }
}

/* Drawer */
.drawer{ position: fixed; inset:0; display:grid; grid-template-columns: 280px 1fr; z-index:60; visibility:hidden; opacity:0; pointer-events:none; transition: opacity .25s ease }
.drawer.open{ visibility:visible; opacity:1; pointer-events:auto }
.drawer .overlay{ grid-column:2 / -1; background: rgba(0,0,0,.45); backdrop-filter: blur(3px); opacity:.8 }
.drawer .panel{ grid-column:1 / 2; height:100%; max-width:none; border-radius:0 16px 16px 0 }
.drawer-links{ display:grid; gap:10px; margin-top:8px }
.drawer-links a{ color: var(--text-primary); text-decoration:none; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); padding:8px 12px; border-radius:10px }
.drawer-group{ display:grid; gap:8px; margin:8px 0 14px 0 }
.drawer-group-title{ color: var(--text-secondary); font-size:12px; letter-spacing:.4px; padding:0 2px }

/* Leaderboards */
.board{ position:relative; padding-right:64px }
.board .score{ position:absolute; top:12px; right:12px; padding:6px 10px; border-radius:999px; background: linear-gradient(180deg, #ffd38a, #ffb84d); color:#0d1116; font-weight:800; border:1px solid rgba(255,255,255,.3); box-shadow: 0 8px 16px rgba(0,0,0,.25) }
.board .avatar{ width:36px; height:36px; border-radius:999px; object-fit:cover; border:1px solid rgba(255,255,255,.28); box-shadow: 0 6px 12px rgba(0,0,0,.22); margin-bottom:8px }