:root{--ink:#1a1207;--gold:#c8a04a;--gold-bright:#e6c976;--maroon:#6e1f2a;--cream:#f4ecd8;--cream-deep:#e8dcc0;--jade:#2f6b52;--shadow:rgba(26,18,7,.18)}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Padauk','Myanmar Text','Noto Sans Myanmar',-apple-system,sans-serif;background:radial-gradient(circle at 20% 10%,rgba(200,160,74,.10),transparent 40%),radial-gradient(circle at 80% 90%,rgba(110,31,42,.08),transparent 45%),var(--cream);color:var(--ink);line-height:1.7;min-height:100vh}
.wrap{max-width:820px;margin:0 auto;padding:0 18px}
header{text-align:center;padding:26px 0 8px}
.brand{font-size:25px;font-weight:800;color:var(--maroon);display:inline-flex;align-items:center;gap:10px}
.brand a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:10px}
.mark{width:32px;height:32px;border-radius:50%;background:conic-gradient(from 0deg,var(--gold),var(--gold-bright),var(--maroon),var(--gold));box-shadow:0 2px 8px var(--shadow)}
.tag{font-size:13px;color:#7a6a4a;margin-top:4px}
nav.crumb{font-size:13px;margin:16px 0 4px}
nav.crumb a{color:var(--maroon);text-decoration:none;font-weight:700}
.hero{margin:20px 0;background:linear-gradient(160deg,#241a0c,#3a2a12);border:1px solid var(--gold);border-radius:22px;padding:30px 24px;text-align:center;color:var(--cream);box-shadow:0 12px 40px rgba(26,18,7,.35)}
.hero h1{font-size:20px;color:var(--gold-bright);margin-bottom:4px}
.hero .sub{font-size:13px;color:#c9bda0;margin-bottom:20px}
.dice-display{font-size:80px;font-weight:800;line-height:1;color:var(--cream);min-height:92px;display:flex;align-items:center;justify-content:center;text-shadow:0 4px 18px rgba(0,0,0,.4)}
.dice-display .ph{font-size:38px;color:#6a5a3a;font-weight:600}
.roll-btn{margin-top:18px;background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#241a0c;font-weight:800;font-size:17px;border:none;border-radius:14px;padding:14px 40px;cursor:pointer;box-shadow:0 6px 18px rgba(200,160,74,.4);transition:transform .12s}
.roll-btn:hover{transform:translateY(-2px)}
.roll-btn:disabled{opacity:.6}
.result-card{margin-top:20px;background:rgba(244,236,216,.08);border:1px solid rgba(230,201,118,.35);border-radius:14px;padding:16px;display:none}
.result-card.show{display:block}
.result-card .lbl{font-size:13px;color:var(--gold-bright);margin-bottom:6px}
.result-card .meaning{font-size:15px;color:var(--cream)}
.result-card .more{display:inline-block;margin-top:12px;background:var(--maroon);color:var(--cream);text-decoration:none;font-weight:700;font-size:14px;padding:9px 20px;border-radius:10px}
.result-card .tg{margin-top:12px;font-size:13px;color:#c9bda0;border-top:1px dashed rgba(230,201,118,.3);padding-top:10px}
.result-card .tg a{color:var(--gold-bright);font-weight:700}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0}
@media(max-width:560px){.row2{grid-template-columns:1fr}}
.card-link{background:#fff;border:1px solid var(--cream-deep);border-radius:16px;padding:18px;text-decoration:none;color:var(--ink);display:block;transition:transform .12s;box-shadow:0 3px 12px var(--shadow)}
.card-link:hover{transform:translateY(-3px)}
.card-link .ic{font-size:28px}
.card-link h3{font-size:16px;color:var(--maroon);margin:6px 0 3px}
.card-link p{font-size:12px;color:#7a6a4a}
.section-title{font-size:18px;font-weight:800;color:var(--maroon);margin:26px 0 14px;display:flex;align-items:center;gap:10px}
.section-title::before{content:"";width:22px;height:3px;background:var(--gold);border-radius:2px}
.list{display:flex;flex-direction:column;gap:9px}
.item{background:#fff;border:1px solid var(--cream-deep);border-radius:12px;padding:13px 16px;text-decoration:none;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:12px;transition:border-color .12s}
.item:hover{border-color:var(--gold)}
.item h4{font-size:15px;font-weight:600}
.item .arr{color:var(--gold);font-weight:800}
.numgrid{display:grid;grid-template-columns:repeat(10,1fr);gap:7px}
@media(max-width:560px){.numgrid{grid-template-columns:repeat(5,1fr)}}
.numgrid a{background:#fff;border:1px solid var(--cream-deep);border-radius:10px;padding:10px 0;text-align:center;font-weight:800;color:var(--maroon);text-decoration:none;font-size:15px;transition:all .12s}
.numgrid a:hover{background:var(--gold-bright);border-color:var(--gold)}
.detail-hero{background:linear-gradient(160deg,#241a0c,#3a2a12);border:1px solid var(--gold);border-radius:22px;padding:28px 24px;text-align:center;color:var(--cream);margin:10px 0 18px;box-shadow:0 12px 40px rgba(26,18,7,.35)}
.detail-hero .big{font-size:72px;font-weight:800;color:var(--gold-bright);line-height:1}
.detail-hero .cap{font-size:13px;color:#c9bda0;margin-top:6px}
.body-card{background:#fff;border:1px solid var(--cream-deep);border-radius:16px;padding:22px;box-shadow:0 3px 12px var(--shadow)}
.body-card h2{font-size:17px;color:var(--maroon);margin:18px 0 8px}
.body-card h2:first-child{margin-top:0}
.body-card p{font-size:15px;margin-bottom:10px}
.chip{display:inline-block;background:var(--cream);border:1px solid var(--gold);color:var(--maroon);font-weight:700;border-radius:20px;padding:5px 14px;font-size:14px;margin:4px 6px 4px 0}
.tg-cta{margin-top:20px;background:var(--jade);color:#fff;border-radius:14px;padding:18px;text-align:center}
.tg-cta p{margin-bottom:8px;font-size:15px}
.tg-cta a{font-size:18px;font-weight:800;letter-spacing:1px;background:rgba(255,255,255,.18);border-radius:10px;padding:8px 16px;display:inline-block;color:#fff;text-decoration:none}
.related{margin-top:20px}
.related h2{font-size:16px;color:var(--maroon);margin-bottom:10px}
.rel-nums{display:flex;flex-wrap:wrap;gap:8px}
.rel-nums a{background:#fff;border:1px solid var(--cream-deep);border-radius:10px;padding:8px 14px;text-decoration:none;color:var(--maroon);font-weight:700}
.rel-nums a:hover{border-color:var(--gold)}
footer{text-align:center;padding:28px 0;color:#8a7a5a;font-size:13px}
footer a{color:var(--maroon);font-weight:700;text-decoration:none}