:root{--bg:#fff9fc;--paper:#271923;--panel:#fff;--muted:#786875;--pink:#e83d91;--pink-dark:#b52a70;--blush:#f8e5ef;--line:#ead5e0;--display:"Barlow Condensed",Impact,sans-serif;--body:"Manrope",Arial,sans-serif;--serif:Georgia,serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--paper);font-family:var(--body);overflow-x:hidden}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}.topbar{height:82px;padding:0 7vw;display:flex;align-items:center;justify-content:space-between;background:rgba(255,249,252,.94);border-bottom:1px solid var(--line);position:absolute;z-index:20;top:0;left:0;width:100%;backdrop-filter:blur(12px)}.brand{display:flex;align-items:center;gap:10px;font:900 21px var(--display);letter-spacing:.06em}.brand-mark{width:34px;height:34px;display:grid;place-items:center;background:var(--pink);color:white;border-radius:10px 3px 10px 3px;font:900 23px var(--display)}.brand-light{color:var(--pink)}.nav{display:flex;gap:34px;margin-left:auto;margin-right:38px}.nav a,.nav-discord{font-size:10px;font-weight:800;letter-spacing:.13em}.nav a{color:#695866}.nav a:hover,.nav a.active{color:var(--pink-dark)}.nav-discord{background:var(--paper);color:#fff;padding:13px 17px;border-radius:4px}.menu-toggle{display:none;background:none;border:0;font-size:24px;color:var(--paper)}
.hero{position:relative;min-height:750px;padding:130px 8vw 75px;display:grid;grid-template-columns:1fr .9fr;gap:4vw;align-items:center;overflow:hidden;background:linear-gradient(115deg,#fff9fc 0%,#f8e8f0 62%,#f2d9e7 100%)}.hero:before{content:"";position:absolute;width:550px;height:550px;border-radius:50%;right:-130px;top:90px;background:#f5cddd;opacity:.55}.hero-content{position:relative;z-index:2;max-width:620px}.eyebrow,.section-kicker,.mini-label{font-size:10px;letter-spacing:.18em;font-weight:900;color:var(--pink-dark)}.pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--pink);margin-right:10px}.hero h1,.rules-hero h1{font:900 clamp(78px,10vw,140px)/.78 var(--display);letter-spacing:-.035em;margin:30px 0 25px}.hero h1 span,.intro h2 em,.cast-heading h2 em,.rules-panel h2 em,.rules-hero h1 em,.glossary h2 em{font-style:normal;color:var(--pink)}.hero-copy{max-width:480px;color:#6f5c69;font-size:14px;line-height:1.9}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}.btn{min-height:64px;padding:12px 19px;display:inline-flex;align-items:center;gap:13px;border:1px solid transparent;cursor:pointer;text-align:left;transition:transform .18s,background .18s}.btn:hover{transform:translateY(-2px)}.btn-primary{background:var(--pink);color:#fff;border-radius:4px;box-shadow:0 8px 18px rgba(232,61,145,.16)}.btn-primary:hover{background:var(--pink-dark)}.btn-outline{border-color:#d8bdcb;background:#fff9fc;color:var(--paper);border-radius:4px}.btn small{display:block;font-size:8px;letter-spacing:.12em;font-weight:800;opacity:.75;margin-bottom:4px}.btn strong{display:block;font:800 17px var(--display);letter-spacing:.05em}.btn-icon,.discord-icon{font-size:24px}.hero-footnote{display:flex;align-items:center;gap:12px;margin-top:44px;font-size:9px;letter-spacing:.15em;color:#927d8b}.hero-footnote .line{width:35px;height:1px;background:var(--pink)}.hero-art-wrap{position:relative;z-index:2;justify-self:end;width:min(100%,510px);transform:rotate(1.5deg)}.hero-art{width:100%;display:block;border:9px solid white;box-shadow:0 22px 50px rgba(88,35,65,.16);border-radius:3px}.art-caption{display:block;text-align:right;font-size:8px;letter-spacing:.17em;color:#806a79;margin-top:13px}.hero-scroll{position:absolute;bottom:25px;right:8vw;font-size:9px;letter-spacing:.15em;color:#927d8b}

.hero-skyline {
  position: absolute;
  top: -8%;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  height: 120%;
  z-index: 0;
  opacity: 0.15;
  pointer-events: none;
  overflow: hidden;
}

.skyline-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section-wrap{padding-left:10vw;padding-right:10vw}.intro{padding-top:115px;padding-bottom:115px}.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:8%;margin-top:35px}.intro h2,.cast-heading h2,.rules-panel h2,.glossary h2{font:900 clamp(55px,7vw,88px)/.86 var(--display);margin:0}.intro-text{max-width:510px}.intro-text p{font-size:13px;line-height:1.9;color:var(--muted)}.intro-text .lead{font-size:18px;line-height:1.55;color:var(--paper);font-weight:700}.text-link{display:inline-block;margin-top:14px;font-size:10px;letter-spacing:.13em;font-weight:900;color:var(--pink-dark)}.feature-strip{display:grid;grid-template-columns:repeat(3,1fr);background:#f4dce8}.feature-card{min-height:260px;padding:32px 3vw;display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid #e8c5d7;position:relative;overflow:hidden}.feature-card:last-child{border:0}.feature-no{font:700 14px var(--display);color:var(--pink-dark)}.feature-card small{font-size:8px;letter-spacing:.16em;font-weight:900;color:#896d7d}.feature-card h3{font:900 42px/.86 var(--display);margin:12px 0 0}
.feature-photo-circle { position:absolute; width:120px; height:120px; border-radius:50%; right:-20px; top:45px; border:2px solid rgba(181,42,112,.22); background-color:#e8c5d7; background-size:cover; background-position:center; }
.photo-bg-one { background-image:url('assets/feature-1.webp'); }
.photo-bg-two { background-image:url('assets/feature-2.webp'); }
.photo-bg-three { background-image:url('assets/feature-3.webp'); }
.street-cast{padding-top:110px;padding-bottom:115px}.cast-heading{display:flex;justify-content:space-between;align-items:end;margin:28px 0 36px;gap:30px}.cast-heading p{max-width:300px;color:var(--muted);font-size:12px;line-height:1.8;margin:0}.cast-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.cast-card{background:#fff;border:1px solid var(--line);box-shadow:0 8px 25px rgba(82,42,63,.06)}.cast-art{height:260px;overflow:hidden;background:#f4dce8}.cast-art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}.cast-card:hover .cast-art img{transform:scale(1.04)}.cast-meta{padding:20px}.cast-meta small{font-size:8px;letter-spacing:.16em;color:var(--pink-dark);font-weight:900}.cast-meta h3{font:800 26px var(--display);margin:8px 0}.cast-meta p{font-size:10px;line-height:1.7;color:var(--muted);margin:0}.rules-cta{padding-bottom:115px}.rules-panel{background:#f5e1eb;padding:48px 6%;display:flex;justify-content:space-between;align-items:center;gap:40px;border-left:5px solid var(--pink)}.rules-panel-right{max-width:340px}.rules-panel-right p{font-size:12px;line-height:1.8;color:#715c69}.compact{min-height:50px;padding:12px 17px;font-size:12px}.footer{padding:27px 8vw;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);background:#fff}.footer p{font:700 12px var(--display);letter-spacing:.12em;color:#8b7482;margin:0}.footer>span{font-size:8px;letter-spacing:.13em;color:#8b7482}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--paper);color:white;padding:12px 18px;border-radius:4px;font-size:12px;z-index:40;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}
/* Break Rules */
.rules-hero{position:relative;min-height:580px;padding:160px 10vw 75px;display:grid;grid-template-columns:1fr .85fr;gap:6vw;align-items:center;background:#f7e5ee;overflow:hidden}.rules-hero-copy{position:relative;z-index:2}.rules-overline{margin:30px 0 0;font-size:9px;font-weight:900;letter-spacing:.18em;color:var(--pink-dark)}.rules-hero h1{font-size:clamp(76px,9vw,125px);margin:20px 0}.rules-intro{max-width:460px;color:#735f6c;font-size:13px;line-height:1.9;margin-bottom:25px}.rules-photo{position:relative;z-index:1;transform:rotate(2deg);background:#fff;padding:9px 9px 35px;box-shadow:0 20px 45px rgba(82,42,63,.15)}.rules-photo img{display:block;width:100%;height:270px;object-fit:cover}.rules-photo span{display:block;font-size:8px;letter-spacing:.13em;color:#816c79;padding:12px 4px 0}.rules-hero-tape{position:absolute;right:0;bottom:22px;background:var(--pink);color:white;padding:9px 28px;font:800 12px var(--display);letter-spacing:.14em;transform:rotate(-2deg)}.glossary{padding-top:90px;padding-bottom:110px}.glossary-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:35px}.glossary-heading p{max-width:340px;font-size:12px;line-height:1.8;color:var(--muted);margin:0}.glossary h2{font-size:clamp(56px,7vw,82px);margin-top:20px}.rule-tools{background:#f7eaf1;border:1px solid var(--line);padding:18px;margin-bottom:24px}.search-wrap{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #e8d5df;padding:0 15px;max-width:100%;height:50px}.search-wrap span{font-size:25px;color:var(--pink)}.rule-search{border:0;outline:0;width:100%;height:100%;background:transparent;color:var(--paper);font-size:12px}.filter-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.filter-chip{border:1px solid #e3c9d7;background:#fff;color:#755f6d;padding:8px 12px;font-size:8px;font-weight:900;letter-spacing:.1em;border-radius:2px}.filter-chip:hover,.filter-chip.active{background:var(--pink);border-color:var(--pink);color:white}.rule-result-line{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.13em;color:#9a8491;margin-bottom:13px}.rule-result-line strong{color:var(--pink-dark)}.rule-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.rule-card{background:#fff;border:1px solid var(--line);padding:18px;min-height:160px;box-shadow:0 4px 14px rgba(82,42,63,.035);transition:transform .16s,border-color .16s}.rule-card:hover{transform:translateY(-2px);border-color:#e99ac2}.rule-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.rule-card-code{font:800 16px var(--display);color:var(--pink-dark)}.rule-card-category{font-size:7px;letter-spacing:.12em;color:#9a8491;font-weight:900}.rule-card h3{font:800 20px var(--display);margin:0 0 7px}.rule-card p{font-size:10px;line-height:1.75;color:var(--muted);margin:0}.rules-empty{padding:30px;text-align:center;color:var(--muted);background:#fff;border:1px dashed var(--line)}.rules-note{margin:30px 0;padding:20px 22px;background:#fff2f8;border:1px solid #edc9dc;border-left:4px solid var(--pink)}.rules-note strong{font-size:9px;letter-spacing:.14em;color:var(--pink-dark)}.rules-note p{font-size:10px;line-height:1.8;color:#735f6c;margin:7px 0 0}
@media(max-width:900px){.hero{grid-template-columns:1fr .85fr;padding-left:7vw;padding-right:7vw}.hero h1{font-size:clamp(64px,9vw,100px)}.cast-grid{gap:10px}.cast-art{height:210px}.cast-meta{padding:15px}.rule-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.topbar{height:70px;padding:0 6vw}.nav,.nav-discord{display:none}.menu-toggle{display:block}.nav.open{display:flex;position:absolute;top:69px;left:0;width:100%;margin:0;padding:22px 6vw;background:#fff9fc;flex-direction:column;gap:20px;border-bottom:1px solid var(--line)}.hero{min-height:0;grid-template-columns:1fr;padding:115px 7vw 65px;gap:35px}.hero-content{margin:0}.hero-art-wrap{justify-self:center;width:min(100%,470px)}.section-wrap{padding-left:7vw;padding-right:7vw}.intro{padding-top:80px;padding-bottom:80px}.intro-grid{grid-template-columns:1fr;gap:25px}.feature-strip{grid-template-columns:1fr}.feature-card{min-height:190px;padding:25px 7vw}.street-cast{padding-top:75px;padding-bottom:80px}.cast-heading{align-items:flex-start;flex-direction:column}.cast-grid{grid-template-columns:1fr 1fr}.cast-art{height:190px}.rules-panel{padding:32px 7%;align-items:flex-start;flex-direction:column;gap:20px}.footer{padding:22px 7vw;flex-wrap:wrap;gap:15px}.rules-hero{grid-template-columns:1fr;padding:120px 7vw 70px;gap:35px}.rules-photo{width:min(100%,480px);justify-self:center}.rules-photo img{height:230px}.glossary{padding-top:70px;padding-bottom:80px}.glossary-heading{align-items:flex-start;flex-direction:column}.rules-hero-tape{font-size:9px}.rule-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.hero h1{font-size:clamp(58px,16vw,82px)}.hero-actions{flex-direction:column;align-items:stretch;max-width:350px}.btn{min-height:60px}.hero-footnote{font-size:7px}.intro h2,.cast-heading h2,.rules-panel h2{font-size:62px}.cast-grid{grid-template-columns:1fr}.cast-art{height:220px}.rules-hero h1{font-size:76px}.rule-grid{grid-template-columns:1fr}.rule-card{min-height:0}.filter-chip{padding:8px 9px}.footer>span{font-size:7px}}


/* Aksi sanksi pada setiap kartu Break Rules */
.rule-card-sanction {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 16px;
  padding: 11px 13px;
  border: 1px solid rgba(255, 105, 180, 0.22);
  border-radius: 10px;
  background: rgba(255, 105, 180, 0.07);
}

.rule-card-sanction span {
  color: var(--muted, #a9a0aa);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rule-card-sanction strong {
  color: var(--text, #f4edf4);
  font-size: 0.86rem;
  line-height: 1.5;
  font-weight: 650;
}


/* MAIN RULES — halaman peraturan utama */
.main-rules-page { background: var(--paper, #fff9fc); }
.main-rules-hero {
  position: relative; overflow: hidden; display: grid;
  grid-template-columns: 1.1fr .9fr; align-items: center; gap: 45px;
  min-height: 490px; padding: 125px 9vw 80px;
  background: linear-gradient(120deg, #fff3f9 0%, #f9dce9 55%, #f4c7dc 100%);
}
.main-rules-hero:after {
  content: "RULEBOOK"; position: absolute; right: -20px; bottom: -60px;
  font: 900 clamp(90px, 17vw, 230px)/.8 var(--display);
  color: rgba(205, 83, 143, .08); pointer-events: none;
}
.main-rules-hero-copy { position: relative; z-index: 1; max-width: 680px; }
.main-rules-hero h1 {
  margin: 15px 0 20px; font: 900 clamp(66px, 9vw, 118px)/.82 var(--display);
  letter-spacing: -.035em; color: var(--ink, #241923);
}
.main-rules-hero h1 em { color: var(--pink-dark, #c64b88); font-style: normal; }
.main-rules-hero .main-rules-lead {
  max-width: 560px; color: #705d69; font-size: 13px; line-height: 1.9; margin: 0 0 25px;
}
.main-rules-stamp {
  justify-self: center; position: relative; z-index: 1; width: min(100%, 350px);
  aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(190, 75, 130, .35);
  background: radial-gradient(circle, rgba(255,255,255,.88), rgba(255,255,255,.15) 68%);
  box-shadow: 0 25px 70px rgba(128, 54, 91, .12);
}
.main-rules-stamp:before, .main-rules-stamp:after {
  content: ""; position: absolute; inset: 18px; border: 1px dashed rgba(190,75,130,.35); border-radius: 50%;
}
.main-rules-stamp:after { inset: 38px; border-style: solid; opacity: .55; }
.main-rules-stamp strong {
  text-align: center; font: 900 clamp(34px, 5vw, 58px)/.9 var(--display);
  color: var(--pink-dark, #c64b88); transform: rotate(-8deg);
}
.main-rules-stamp span {
  position: absolute; bottom: 26%; font-size: 8px; font-weight: 900;
  letter-spacing: .22em; color: #806a78;
}
.main-rules-content { padding-top: 75px; padding-bottom: 100px; }
.main-rules-heading {
  display: flex; justify-content: space-between; align-items: end; gap: 35px; margin-bottom: 35px;
}
.main-rules-heading h2 {
  margin: 10px 0 0; font: 900 clamp(48px, 6vw, 76px)/.86 var(--display);
  color: var(--ink, #241923);
}
.main-rules-heading h2 em { color: var(--pink-dark, #c64b88); font-style: normal; }
.main-rules-heading > p { max-width: 370px; color: var(--muted, #806f7b); font-size: 11px; line-height: 1.8; }
.main-rule-list { display: grid; gap: 22px; }
.main-rule-card {
  position: relative; padding: clamp(22px, 4vw, 38px);
  background: #fff; border: 1px solid var(--line, #efdce6);
  box-shadow: 0 14px 38px rgba(70, 35, 54, .045);
}
.main-rule-card:before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(#e99ac2, #c64b88);
}
.main-rule-top { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.main-rule-number {
  width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center;
  background: #fff0f7; color: var(--pink-dark, #c64b88);
  font: 900 20px var(--display); border: 1px solid #f0c9dc;
}
.main-rule-top small { display: block; color: #a17e91; font-size: 8px; font-weight: 900; letter-spacing: .16em; }
.main-rule-top h3 { margin: 3px 0 0; color: var(--ink, #241923); font: 800 clamp(22px, 3vw, 30px)/1.05 var(--display); }
.main-rule-card p, .main-rule-card li {
  color: #6e5d68; font-size: 11px; line-height: 1.9;
}
.main-rule-card p { margin: 0 0 13px; }
.main-rule-card strong { color: #392b35; }
.main-rule-card h4 {
  margin: 26px 0 10px; color: var(--pink-dark, #c64b88);
  font: 800 17px var(--display); letter-spacing: .02em;
}
.main-rule-card ul, .main-rule-card ol { padding-left: 20px; margin: 8px 0 16px; }
.main-rule-card li { padding-left: 3px; margin: 4px 0; }
.main-rule-callout {
  margin: 18px 0; padding: 16px 18px; background: #fff4f9;
  border: 1px solid #f0d4e2; border-left: 3px solid var(--pink, #e99ac2);
}
.main-rule-callout > strong {
  display: block; margin-bottom: 7px; color: var(--pink-dark, #c64b88);
  font-size: 9px; letter-spacing: .13em; text-transform: uppercase;
}
.main-rule-callout p:last-child { margin-bottom: 0; }
.main-rule-example {
  margin: 12px 0; padding: 15px 17px; background: #fbf8fa;
  border: 1px solid #eee4e9; border-radius: 2px;
}
.main-rule-example b {
  display: block; margin-bottom: 6px; color: #493542; font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase;
}
.main-rule-punishment { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 14px 0; }
.main-rule-punishment > div {
  padding: 15px; background: #fff8fb; border: 1px solid #efdce6;
}
.main-rule-punishment small {
  display: block; color: #a17e91; font-size: 8px; font-weight: 900; letter-spacing: .12em;
}
.main-rule-punishment strong { display: block; margin: 7px 0; color: #bb477f; font: 800 16px var(--display); }
.main-rule-punishment p { margin: 0; font-size: 10px; }
.main-rule-conclusion {
  margin-top: 20px; padding: 18px 20px; background: #33232f; color: #fff;
}
.main-rule-conclusion strong { color: #f2a9ce; font-size: 9px; letter-spacing: .14em; }
.main-rule-conclusion p { color: #f4e8ef; margin: 7px 0 0; }
.main-rules-index { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 30px; }
.main-rules-index a {
  padding: 9px 13px; color: #8f456b; background: #fff;
  border: 1px solid #efd4e2; font-size: 9px; font-weight: 800; letter-spacing: .06em;
  text-decoration: none; transition: .15s;
}
.main-rules-index a:hover { background: #fff0f7; border-color: #d98ab2; }
.main-rules-footnote {
  margin: 25px 0 30px; padding: 18px 20px; border: 1px dashed #dfb8cc;
  color: #806b78; font-size: 10px; line-height: 1.8;
}

/* Gallery Styles */
.gallery-page { background: var(--paper, #fff9fc); }
.gallery-hero {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 380px; padding: 125px 9vw 60px;
  background: linear-gradient(135deg, #fff3f9 0%, #f4c7dc 100%);
}
.gallery-hero-copy { position: relative; z-index: 1; max-width: 600px; }
.gallery-hero h1 {
  margin: 15px 0 15px; font: 900 clamp(54px, 8vw, 96px)/.82 var(--display);
  letter-spacing: -.035em; color: var(--ink, #241923);
}
.gallery-hero h1 em { color: var(--pink-dark, #c64b88); font-style: normal; }
.gallery-lead {
  color: #705d69; font-size: 13px; line-height: 1.9; margin: 0;
}
.gallery-content { padding-top: 60px; padding-bottom: 100px; }
.gallery-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px;
}
.gallery-item {
  background: #fff; border: 1px solid var(--line, #efdce6); padding: 12px;
  box-shadow: 0 8px 25px rgba(70, 35, 54, .04); transition: transform 0.3s;
}
.gallery-item:hover { transform: translateY(-5px); border-color: var(--pink, #e99ac2); }
.gallery-img-wrap {
  width: 100%; height: 200px; overflow: hidden; background: #fbf8fa; border: 1px solid #f0d4e2; margin-bottom: 12px;
}
.gallery-img-wrap img {
  width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s;
}
.gallery-item:hover .gallery-img-wrap img { transform: scale(1.05); }
.gallery-caption h3 {
  margin: 0 0 6px; font: 800 18px var(--display); color: var(--ink, #241923);
}
.gallery-caption p {
  margin: 0; font-size: 10px; line-height: 1.7; color: var(--muted, #806f7b);
}

@media(max-width:760px) {
  .main-rules-hero { grid-template-columns: 1fr; padding: 115px 7vw 65px; gap: 28px; }
  .main-rules-stamp { width: min(70vw, 250px); }
  .main-rules-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .main-rule-punishment { grid-template-columns: 1fr; }
  .gallery-hero { padding: 115px 7vw 50px; min-height: 320px; }
  .gallery-grid { grid-template-columns: 1fr; }
}