*{box-sizing:border-box}
body{margin:0;background:#0b0b0d;color:#fff;font-family:'Kanit',Arial,sans-serif}
.pet-guide{width:100%;max-width:1200px;margin:0 auto;padding:30px 20px 60px}
.pet-guide-header{display:flex;align-items:center;gap:18px;margin-bottom:30px}
.pet-guide-icon{width:65px;height:65px;display:flex;align-items:center;justify-content:center;font-size:34px;border-radius:14px;background:linear-gradient(145deg,#252525,#111);border:1px solid rgba(255,255,255,.12);box-shadow:0 8px 25px rgba(0,0,0,.35)}
.pet-guide-header h1{margin:0;font-size:34px;font-weight:700}.pet-guide-header p{margin:3px 0 0;color:#999;font-size:15px}
.pet-command-box{padding:25px;margin-bottom:35px;border-radius:14px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));border:1px solid rgba(255,255,255,.08)}
.command-title{color:#aaa;font-size:13px;font-weight:700;letter-spacing:1.5px;margin-bottom:12px}
.command-code{display:inline-block;padding:12px 20px;margin-bottom:12px;border-radius:8px;background:#0b0b0b;border:1px solid rgba(255,255,255,.08);color:#fff;font-family:monospace;font-size:18px}
.command-code span{color:#f5c451}.pet-command-box>p{margin:0 0 20px;color:#aaa}
.warning-box{display:flex;gap:13px;padding:15px 17px;border-radius:9px;background:rgba(245,196,81,.07);border:1px solid rgba(245,196,81,.18)}
.warning-icon{color:#f5c451;font-size:22px}.warning-box strong{color:#f5c451}.warning-box p{margin:3px 0 0;color:#aaa;font-size:14px}
.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.08)}
.section-title span{color:#fff;font-size:21px;font-weight:700}.section-title small{color:#777}
.pet-color-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pet-color-card{position:relative;display:flex;align-items:center;gap:13px;padding:10px 14px;min-height:105px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);transition:all .2s ease;overflow:hidden}
.pet-color-card:hover{transform:translateY(-3px);border-color:rgba(245,196,81,.35);background:rgba(255,255,255,.055);box-shadow:0 8px 25px rgba(0,0,0,.2)}
.pet-number{position:absolute;top:7px;right:9px;color:#555;font-size:10px;font-weight:700;z-index:2}
.pet-image-wrap{width:78px;height:78px;flex:0 0 78px;display:flex;align-items:center;justify-content:center}
.pet-image-wrap img{display:block;width:78px;height:78px;object-fit:contain;filter:drop-shadow(0 5px 8px rgba(0,0,0,.3))}
.pet-info{min-width:0}.pet-info h3{margin:0;color:#eee;font-size:16px;font-weight:700}.pet-info span{display:block;color:#777;font-size:12px;margin-bottom:4px}.pet-info code{display:inline-block;color:#f5c451;font-family:monospace;font-size:12px;background:rgba(0,0,0,.35);padding:2px 6px;border-radius:4px}
.pet-off-box{display:flex;align-items:center;gap:18px;margin-top:35px;padding:23px;border-radius:14px;background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.08)}
.pet-off-icon{width:55px;height:55px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:rgba(255,255,255,.05);font-size:28px}
.pet-off-box h2{margin:0 0 3px;color:#fff;font-size:20px}.pet-off-box p{margin:0 0 10px;color:#888;font-size:14px}.off-command{display:inline-block;padding:7px 13px;border-radius:6px;background:#0b0b0b;border:1px solid rgba(255,255,255,.08);color:#f5c451;font-family:monospace}
.pet-final-warning{margin-top:18px;padding:17px 20px;text-align:center;border-radius:10px;background:rgba(210,65,65,.07);border:1px solid rgba(210,65,65,.15)}
.pet-final-warning strong{color:#ef7777;font-size:14px}.pet-final-warning p{margin:5px 0 0;color:#888;font-size:13px}
@media(max-width:1000px){.pet-color-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.pet-color-grid{grid-template-columns:repeat(2,1fr)}.pet-guide-header h1{font-size:27px}}
@media(max-width:450px){.pet-color-grid{grid-template-columns:1fr}.pet-command-box{padding:18px}.pet-off-box{align-items:flex-start}}

/* =========================================
PET NAME SECTION
========================================= */

.pet-name-section {
margin-top: 0;
padding-top: 35px;
clear: both;
}

.pet-name-box {
display: flex;
align-items: flex-start;
gap: 25px;
padding: 30px;
margin-top: 18px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 14px;
background: rgba(255, 255, 255, 0.025);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.pet-name-icon {
width: 65px;
height: 65px;
min-width: 65px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 14px;
font-size: 30px;
background: rgba(255, 193, 7, 0.08);
border: 1px solid rgba(255, 193, 7, 0.18);
}

.pet-name-content {
flex: 1;
}

.pet-name-content h2 {
margin: 0 0 8px;
font-size: 24px;
font-weight: 700;
}

.pet-name-content > p {
margin: 0 0 20px;
opacity: 0.75;
line-height: 1.7;
}

.name-command-box {
margin: 0 0 22px;
}

.name-command-box .command-code {
font-size: 20px;
}

.name-command-box .command-code span {
color: #fbbf24;
font-weight: 700;
}

.name-command-box p {
margin: 8px 0 0;
opacity: 0.8;
}

.name-command-box code {
padding: 4px 8px;
border-radius: 5px;
background: rgba(255, 255, 255, 0.07);
color: #fbbf24;
}

.pet-name-rules {
padding: 20px;
border-radius: 10px;
background: rgba(0, 0, 0, 0.15);
border: 1px solid rgba(255, 255, 255, 0.06);
}

.pet-name-rules h3 {
margin: 0 0 15px;
font-size: 15px;
letter-spacing: 1px;
}

.name-rule {
display: flex;
align-items: flex-start;
gap: 12px;
margin-top: 12px;
}

.name-rule:first-of-type {
margin-top: 0;
}

.name-rule > span {
color: #4ade80;
font-weight: 700;
}

.name-rule p {
margin: 0;
line-height: 1.6;
opacity: 0.85;
}

.name-rule-warning > span {
color: #fbbf24;
}

@media (max-width: 600px) {
.pet-name-box {
flex-direction: column;
padding: 20px;
}

.pet-name-icon {
    width: 55px;
    height: 55px;
    min-width: 55px;
    font-size: 25px;
}

.pet-name-content h2 {
    font-size: 21px;
}

.name-command-box .command-code {
    font-size: 17px;
}

}