.tunnel-wrap, .tunnel-wrap * { font-family:'Fredoka',sans-serif !important; }
.tunnel-wrap { max-width:1200px; margin:40px auto; padding:0 20px; }

.tunnel-intro { text-align:center; margin-bottom:40px; }
.tunnel-intro h2 { font-size:clamp(1.4em,3vw,2em); font-weight:700; color:#fff; text-transform:uppercase; letter-spacing:1.5px; text-shadow:0 2px 8px rgba(0,0,0,0.4); margin:0 0 10px; }
.tunnel-intro p { color:rgba(255,255,255,0.7); font-size:1em; margin:0; }

.tunnel-layout { display:flex; gap:20px; flex-wrap:wrap; justify-content:center; align-items:stretch; padding-top:15px; }

.tunnel-card { flex:1; min-width:280px; max-width:360px; border-radius:20px; overflow:hidden; box-shadow:0 15px 40px rgba(0,0,0,0.25); transition:.3s; position:relative; display:flex; flex-direction:column; }
.tunnel-card:hover { transform:translateY(-5px); box-shadow:0 20px 50px rgba(0,0,0,0.35); }

.tunnel-card-clan   { background:linear-gradient(160deg,#1a1a2e,#16213e,#0f3460); border:2px solid rgba(240,173,0,0.3); }
.tunnel-card-clan   .tunnel-card-header { background:linear-gradient(135deg,#f0ad00,#d4930a); }

.tunnel-card-world  { background:linear-gradient(160deg,#0d1f0d,#143314,#1a4a1a); border:2px solid rgba(40,167,69,0.4); overflow:visible !important; border-radius:20px; }
.tunnel-card-world  .tunnel-card-header { background:linear-gradient(135deg,#28a745,#1a7a30); border-radius:18px 18px 0 0; }
.tunnel-card-world  .tunnel-card-body   { border-radius:0 0 18px 18px; }

.tunnel-card-battle { background:linear-gradient(160deg,#0a1628,#0d2137,#0f3460); border:2px solid rgba(99,179,237,0.3); }
.tunnel-card-battle .tunnel-card-header { background:linear-gradient(135deg,#0073aa,#004d80); }

.tunnel-corner-tag { position:absolute; top:-15px; left:15px; background:linear-gradient(135deg,#28a745,#1a7a30); color:#fff; font-family:'Fredoka',sans-serif; font-weight:700; font-size:.78em; letter-spacing:1.5px; text-transform:uppercase; padding:7px 16px; border-radius:20px; box-shadow:0 4px 12px rgba(40,167,69,0.4); z-index:10; white-space:nowrap; }

.tunnel-card-header { padding:22px 22px 18px; position:relative; }
.tunnel-card-header::after { position:absolute; right:18px; top:15px; transform:none; font-size:2.5em; opacity:.35; }
.tunnel-card-clan   .tunnel-card-header::after { content:'👨‍👩‍👧'; }
.tunnel-card-battle .tunnel-card-header::after { content:'🏫'; }

.tunnel-card-label { display:inline-block; background:rgba(255,255,255,0.2); color:#fff; font-size:.72em; font-weight:700; letter-spacing:2px; text-transform:uppercase; padding:3px 12px; border-radius:20px; margin-bottom:8px; }
.tunnel-card-header h3 { color:#fff; font-size:1.3em; font-weight:700; margin:0 0 6px; text-shadow:0 2px 6px rgba(0,0,0,0.3); }
.tunnel-card-slogan { color:rgba(255,255,255,0.92); font-size:.88em; font-style:italic; margin:0; line-height:1.4; }

.tunnel-card-body { padding:22px; flex:1; display:flex; flex-direction:column; }

.tunnel-feature { display:flex; gap:10px; margin-bottom:14px; align-items:flex-start; }
.tunnel-feature-icon { font-size:1.2em; flex-shrink:0; margin-top:2px; }
.tunnel-feature-text { flex:1; }
.tunnel-feature-title { font-size:.85em; font-weight:700; margin-bottom:2px; }
.tunnel-card-clan   .tunnel-feature-title { color:#f0ad00; }
.tunnel-card-world  .tunnel-feature-title { color:#5cd97a; }
.tunnel-card-battle .tunnel-feature-title { color:#63b3ed; }
.tunnel-feature-desc { font-size:.82em; color:rgba(255,255,255,0.72); line-height:1.5; }

.tunnel-note { font-size:.75em; color:rgba(255,255,255,0.45); font-style:italic; margin-top:auto; padding-top:12px; border-top:1px solid rgba(255,255,255,0.1); line-height:1.4; }

.tunnel-btn { display:block; text-align:center; font-weight:700; font-size:.95em; padding:13px 20px; border-radius:12px; text-decoration:none !important; transition:.25s; letter-spacing:.3px; margin-top:18px; }
.tunnel-btn:hover { transform:translateY(-2px); }
.tunnel-btn-clan   { background:linear-gradient(135deg,#f0ad00,#d4930a); color:#fff !important; box-shadow:0 5px 18px rgba(240,173,0,0.3); }
.tunnel-btn-clan:hover   { box-shadow:0 8px 22px rgba(240,173,0,0.45); }
.tunnel-btn-world  { background:linear-gradient(135deg,#28a745,#1a7a30); color:#fff !important; box-shadow:0 5px 18px rgba(40,167,69,0.35); }
.tunnel-btn-world:hover  { box-shadow:0 8px 22px rgba(40,167,69,0.5); }
.tunnel-btn-battle { background:linear-gradient(135deg,#0073aa,#004d80); color:#fff !important; box-shadow:0 5px 18px rgba(0,115,170,0.3); }
.tunnel-btn-battle:hover { box-shadow:0 8px 22px rgba(0,115,170,0.45); }

@media (max-width:680px) { .tunnel-card { max-width:100%; } .tunnel-corner-tag { left:10px; } }

.tunnel-tabs-wrap { max-width:1200px; margin:0 auto 30px; padding:0 20px; }

.tunnel-tabs-nav {
    display:flex;
    justify-content:center;
    margin-bottom:30px;
}

.tunnel-tab-nav-btn {
    padding:13px 28px !important;
    font-family:'Fredoka',sans-serif !important;
    font-size:1em !important;
    font-weight:700 !important;
    border:none !important;
    cursor:pointer !important;
    color:#aaa !important;
    background:#f0f0f0 !important;
    transition:.2s !important;
    text-align:center !important;
}

.tunnel-tab-nav-btn:first-child {
    border-radius:30px 0 0 30px !important;
    border-right:1px solid #ddd !important;
}

.tunnel-tab-nav-btn:last-child {
    border-radius:0 30px 30px 0 !important;
}

.tunnel-tab-nav-btn:hover {
    color:#666 !important;
    background:#e5e5e5 !important;
}

.tunnel-tab-nav-btn.active {
    color:#fff !important;
    background:linear-gradient(135deg,#f0ad00,#d4930a) !important;
    border:none !important;
    z-index:3 !important;
    box-shadow:0 4px 15px rgba(240,173,0,0.3) !important;
}

.tunnel-tab-content {
    background:#fff !important;
    border:1px solid #e9ecef !important;
    border-radius:16px !important;
    padding:35px 30px !important;
    box-shadow:0 4px 20px rgba(0,0,0,0.06) !important;
}
.tunnel-tab-panel { display:none; }
.tunnel-tab-panel.active { display:block; }

.tunnel-auth-wrap { max-width:500px; margin:0 auto; }
.tunnel-auth-card { background:#fff; border-radius:16px; padding:35px; box-shadow:0 8px 25px rgba(0,0,0,0.2); }
.tunnel-auth-card h3 { text-align:center; color:#0073aa; font-size:1.4em; margin:0 0 4px; font-family:'Fredoka',sans-serif; }
.tunnel-auth-subtitle { text-align:center; color:#aaa; font-size:.88em; margin:0 0 22px; font-family:'Fredoka',sans-serif; }
.tunnel-auth-input { width:100%; padding:12px 15px; margin:6px 0 15px; border-radius:8px; border:2px solid #e0e0e0; box-sizing:border-box; font-size:1em; font-family:'Fredoka',sans-serif; transition:.2s; min-height:48px; }
.tunnel-auth-input:focus { border-color:#0073aa; outline:none; }
.tunnel-auth-btn { width:100%; padding:14px; border:none; border-radius:10px; cursor:pointer; font-weight:700; color:#fff; font-size:1.05em; transition:.2s; font-family:'Fredoka',sans-serif; background:linear-gradient(135deg,#0073aa,#004d80); }
.tunnel-auth-btn:hover { opacity:.9; transform:translateY(-1px); }
.tunnel-auth-sep { text-align:center; color:#888; margin:22px 0; font-size:.88em; font-family:'Fredoka',sans-serif; display:flex; align-items:center; gap:10px; font-weight:700; }
.tunnel-auth-sep::before, .tunnel-auth-sep::after { content:''; flex:1; height:2px; background:#f0ad00; }
.tunnel-auth-error { background:#fdecea; color:#c0392b; padding:10px 14px; border-radius:8px; margin-bottom:15px; font-size:.9em; font-family:'Fredoka',sans-serif; }
.tunnel-code-wrap { background:#f0f7fb; border:2px solid #b8daff; border-radius:12px; padding:22px; margin-top:22px; }
.tunnel-code-wrap h4 { color:#0073aa; font-family:'Fredoka',sans-serif; margin:0 0 6px; font-size:1.05em; }
.tunnel-code-wrap p { color:#555; font-size:.88em; margin:0 0 14px; font-family:'Fredoka',sans-serif; line-height:1.5; }
.tunnel-auth-btn-green { width:100%; padding:13px; border:none; border-radius:10px; cursor:pointer; font-weight:700; color:#fff; font-size:1em; transition:.2s; font-family:'Fredoka',sans-serif; background:linear-gradient(135deg,#28a745,#1e7e34); }
.tunnel-auth-btn-green:hover { opacity:.9; transform:translateY(-1px); }
label.tunnel-label { display:block; margin-bottom:3px; font-weight:600; color:#333; font-size:.95em; font-family:'Fredoka',sans-serif; }