/* Bahay Natin styles (v105). All classes are scoped under .mh-wrap
   so the game never restyles the rest of the app. Default theme is
   dollhouse at dusk (deep plum night, gold capiz glow); .mh-light
   is capiz day (pale ivory and gold). Craft tiers differ in symbol,
   name, and pattern, never colour alone. Tap targets are 44px or
   taller. The board is 6 columns, dropping to 3 on narrow screens
   like the package layout. */
.mh-wrap { color: #fdf6e9; }
.mh-wrap.mh-light { color: #2b1533; }
.mh-wrap button, .mh-wrap select { font: inherit; }
.mh-btn { cursor: pointer; min-height: 44px; border-radius: 12px; border: 1px solid rgba(255,255,255,.35); padding: 8px 12px; background: rgba(255,255,255,.12); color: inherit; }
.mh-light .mh-btn { background: rgba(255,255,255,.85); border-color: rgba(43,21,51,.3); }
.mh-btn.mh-primary { background: #e8b64c; color: #2b1533; font-weight: 700; border-color: #e8b64c; }
.mh-btn:disabled { opacity: .55; cursor: default; }
.mh-hero { text-align: center; padding: 10px 6px 4px; }
.mh-hero h3 { margin: 6px 0; font-size: 1.4rem; }
.mh-wave { font-size: 1.4rem; letter-spacing: .2em; }
.mh-wave span { color: #e8b64c; }
.mh-card { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 18px; padding: 14px; margin: 12px 0; }
.mh-light .mh-card { background: rgba(255,255,255,.8); }
.mh-micro { font-size: .9rem; opacity: .9; }
.mh-msg { min-height: 1.4em; font-weight: 600; }
.mh-progress { height: 14px; background: rgba(0,0,0,.25); border-radius: 99px; overflow: hidden; }
.mh-progress > div { height: 100%; background: linear-gradient(90deg, #e56b7a, #e8b64c); }
.mh-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.mh-tabs .mh-btn { flex: 1; }
.mh-basket { display: flex; gap: 8px; flex-wrap: wrap; }
.mh-basket .mh-btn { flex: 1; }
.mh-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 12px 0; }
.mh-cell { aspect-ratio: 1; border-radius: 14px; border: 2px dashed rgba(255,255,255,.33); background: rgba(0,0,0,.19); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: .9rem; text-align: center; padding: 4px; min-height: 56px; cursor: pointer; color: inherit; }
.mh-cell.mh-sel { outline: 3px solid #e8b64c; background: rgba(232,182,76,.2); }
.mh-cell .mh-sym { font-size: 1.7rem; line-height: 1; }
.mh-cell .mh-nm { font-weight: 700; }
.mh-craft-rattan { background: repeating-linear-gradient(45deg, #3a2a12 0 6px, #5a4218 6px 12px); }
.mh-craft-capiz { background: radial-gradient(circle at 30% 30%, #ffe9b8, #e8b64c 70%); }
.mh-light .mh-craft-capiz { color: #2b1533; }
.mh-craft-banig { background: repeating-linear-gradient(0deg, #6b3f22 0 10px, #8a5a33 10px 20px), repeating-linear-gradient(90deg, rgba(0,0,0,.13) 0 10px, transparent 10px 20px); }
.mh-craft-bamboo { background: repeating-linear-gradient(90deg, #2f5d3f 0 12px, #4a7c59 12px 24px); }
.mh-craft-sampaguita { background: radial-gradient(circle, #fff 0 4px, transparent 5px), #3d2b4d; background-size: 22px 22px; }
.mh-light .mh-craft-sampaguita { color: #2b1533; }
.mh-house { border-radius: 18px; overflow: hidden; border: 3px solid #e8b64c; background: linear-gradient(180deg, #7a3b2e, #3d1d4d); }
.mh-light .mh-house { background: linear-gradient(180deg, #ffe9b8, #fdf6e9); }
.mh-roof { text-align: center; padding: 10px; background: #5b2a3a; font-weight: 800; }
.mh-roof span { color: #e8b64c; }
.mh-roombox { border: 1px solid rgba(255,255,255,.2); border-radius: 14px; padding: 10px; margin: 8px 0; background: rgba(0,0,0,.13); }
.mh-light .mh-roombox { background: rgba(255,255,255,.5); }
.mh-shelfitem { border: 1px solid rgba(255,255,255,.2); border-radius: 14px; padding: 10px; margin: 8px 0; background: rgba(0,0,0,.13); }
.mh-light .mh-shelfitem { background: rgba(255,255,255,.5); }
.mh-shelfitem select { min-height: 44px; border-radius: 12px; padding: 6px 8px; }
.mh-pill { display: inline-block; background: #e8b64c; color: #2b1533; border-radius: 999px; padding: 2px 10px; font-weight: 700; margin: 2px; }
.mh-leader { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mh-wrap.mh-large .mh-cell { font-size: 1rem; }
.mh-wrap.mh-large .mh-cell .mh-sym { font-size: 2.2rem; }
.mh-wrap.mh-hc .mh-cell { border-color: #fff; background: #000; }
.mh-wrap.mh-hc .mh-btn { background: #fff; color: #000; }
.mh-wrap.mh-rm * { transition: none !important; animation: none !important; }
@media (max-width: 600px) { .mh-grid { grid-template-columns: repeat(3, 1fr); } .mh-leader { grid-template-columns: 1fr; } }
@media (max-width: 380px) { .mh-grid { gap: 6px; } .mh-btn { padding: 6px 8px; } .mh-hero h3 { font-size: 1.2rem; } }
@media (prefers-reduced-motion: reduce) { .mh-wrap * { transition: none !important; animation: none !important; } }