/* Home window (houses, catalog, storage) and the decorating toolbar. Linked after ui-services.css. */
/* ---- Home: one window for houses, catalog and storage; a top-centre decorating toolbar clear of every HUD corner. ---- */
/* The doubled IDs outweigh the global button rule, whose :not(#pointsPip) carries an ID. */
#minis { grid-template-columns:repeat(7,40px); }
@media (max-width:759px) { #minis { grid-template-columns:repeat(7,34px); } }
#housingUI { position:fixed; inset:0; z-index:48; display:grid; place-items:center; background:rgba(6,4,3,.46); pointer-events:auto; }
#housingUI.hidden,#housingDecorateToolbar.hidden { display:none; }
.housing-window { width:min(1000px,calc((100vw - 32px) / var(--ui-zoom,1))); height:min(660px,calc((100vh - 32px) / var(--ui-zoom,1))); transform:scale(var(--ui-zoom,1)); box-sizing:border-box; display:flex; flex-direction:column; padding:18px 20px 16px; color:#e6d8bc; background:linear-gradient(150deg,#2a1e14,#120c08 70%); border:1px solid #9c7840; border-radius:4px; box-shadow:0 0 0 2px #120b07,0 18px 60px rgba(0,0,0,.72),inset 0 0 42px rgba(0,0,0,.45); font:15px/1.4 Georgia,serif; -webkit-font-smoothing:antialiased; }
.housing-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:12px; border-bottom:1px solid rgba(211,165,81,.3); flex-shrink:0; }
.housing-kicker { margin:0 0 2px; color:#a98954; font:700 11px/1.2 Cinzel,Georgia,serif; letter-spacing:.1em; }
.housing-window h2,.housing-window h3 { margin:0; color:#f2d796; font-family:Cinzel,Georgia,serif; font-weight:700; text-wrap:balance; }
.housing-window h2 { font-size:26px; line-height:1.1; }
.housing-head-side { display:flex; align-items:center; gap:14px; }
.housing-gold { color:#c5b396; font-size:14px; white-space:nowrap; } .housing-gold b { color:#f0cf81; font-variant-numeric:tabular-nums; }
.housing-window kbd,#housingDecorateToolbar kbd,.hud-decorate span { margin-left:6px; padding:0 4px; border:1px solid rgba(214,170,96,.45); border-radius:3px; color:#d9bf87; font:11px/16px Georgia,serif; }
#housingUI#housingUI button { margin:0; min-height:40px; padding:7px 14px; border:1px solid #907044; border-image:none; border-radius:3px; background:linear-gradient(#3d2d1d,#22180f); color:#eadbbd; font:14px/1.25 Georgia,serif; text-transform:none; letter-spacing:0; cursor:pointer; }
#housingUI#housingUI button:hover:not(:disabled) { border-color:#d8b579; background:linear-gradient(#4d3822,#312115); color:#fff3d6; }
#housingUI#housingUI button:focus-visible,#housingDecorateToolbar#housingDecorateToolbar button:focus-visible,.hud-decorate:focus-visible { outline:2px solid #f3d69a; outline-offset:2px; }
#housingUI#housingUI button:disabled { opacity:.45; cursor:default; filter:saturate(.4); }
#housingUI#housingUI button.housing-primary { border-color:#d6a653; background:linear-gradient(#7a4a1e,#43260e); color:#fff1cf; box-shadow:inset 0 1px rgba(255,214,150,.28); }
#housingUI#housingUI button.housing-primary:hover:not(:disabled) { background:linear-gradient(#91592a,#532f12); }
#housingUI#housingUI button.housing-close { padding:0; min-height:0; }
.housing-home-tabs { display:flex; gap:6px; padding:12px 0 0; border-bottom:1px solid rgba(211,165,81,.22); flex-shrink:0; }
#housingUI#housingUI .housing-home-tabs button { min-width:108px; border-bottom:0; border-radius:3px 3px 0 0; background:linear-gradient(#2c2016,#1a120c); color:#bfae90; font:700 14px/1.2 Cinzel,Georgia,serif; }
#housingUI#housingUI .housing-home-tabs button.active { color:#fff0c4; border-color:#d6a653; background:linear-gradient(#58401f,#2a1c10); box-shadow:inset 0 2px #e0b25c; }
.housing-home-tabs small { margin-left:6px; padding:0 6px; border-radius:8px; background:#6b4a22; color:#ffe7b0; font:11px/16px Georgia,serif; }
.housing-body { flex:1 1 auto; min-height:0; overflow-y:auto; padding:14px 6px 2px 0; scrollbar-width:thin; scrollbar-color:#98703c #1b130b; }
.housing-foot { margin:12px 2px 0; color:#a99c85; font-size:13px; text-wrap:pretty; } .housing-foot-top { margin:0 2px 12px; }
.housing-plan-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.housing-plan-card { display:grid; grid-template-columns:150px minmax(0,1fr); grid-template-rows:1fr auto; gap:6px 14px; padding:12px; background:linear-gradient(140deg,rgba(87,59,31,.46),rgba(18,11,8,.78)); box-shadow:inset 0 0 0 1px rgba(226,183,99,.18); border-radius:3px; }
.housing-plan-card.owned { box-shadow:inset 0 0 0 1px rgba(160,205,120,.42); } .housing-plan-card.current { box-shadow:inset 0 0 0 1px #e1b960,0 0 16px rgba(222,170,72,.14); }
.housing-plan-preview { grid-row:1 / span 2; display:grid; place-items:center; min-height:132px; border-radius:3px; background:radial-gradient(ellipse at 50% 60%,rgba(120,150,80,.26),rgba(0,0,0,.25) 70%); }
.housing-plan-preview .housing-thumb { width:142px; height:142px; }
.housing-plan-copy h3 { font-size:17px; } .housing-plan-copy p { margin:4px 0 8px; color:#c2b299; font-size:14px; text-wrap:pretty; }
.housing-badge { margin-left:6px; padding:1px 7px; border-radius:9px; background:#3f5a2a; color:#d8f0b8; font:11px Georgia,serif; vertical-align:2px; }
.housing-plan-copy dl { display:flex; flex-wrap:wrap; gap:3px 14px; margin:0; } .housing-plan-copy dl div { display:flex; gap:5px; font-size:13px; }
.housing-plan-copy dt { color:#a99b82; } .housing-plan-copy dd { margin:0; color:#f0d08a; font-variant-numeric:tabular-nums; }
.housing-plan-actions { display:flex; flex-wrap:wrap; align-items:center; gap:7px; } .housing-short { color:#d49a7c; font-size:12px; }
.housing-catalog-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; margin-bottom:10px; } .housing-catalog-bar p { margin:0; color:#c5b396; font-size:13px; } .housing-catalog-bar b { color:#f0cf81; font-variant-numeric:tabular-nums; }
.housing-scope { display:flex; gap:0; } #housingUI#housingUI .housing-scope button { min-width:92px; border-radius:0; } #housingUI#housingUI .housing-scope button:first-child { border-radius:3px 0 0 3px; } #housingUI#housingUI .housing-scope button:last-child { border-radius:0 3px 3px 0; border-left:0; }
#housingUI#housingUI .housing-scope button.active,#housingUI#housingUI .housing-cats button.active { color:#fff0c4; border-color:#d6a653; background:linear-gradient(#5f4421,#2e1f11); box-shadow:inset 0 -2px #e0b25c; }
.housing-cats { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; } #housingUI#housingUI .housing-cats button { min-height:34px; padding:5px 12px; font-size:13px; }
.housing-item-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(212px,1fr)); gap:10px; align-content:start; }
.housing-item-card { display:grid; grid-template-columns:64px minmax(0,1fr); gap:8px 10px; padding:9px; border-radius:3px; background:linear-gradient(130deg,rgba(84,58,32,.44),rgba(16,10,7,.74)); box-shadow:inset 0 0 0 1px rgba(226,183,99,.16); }
.housing-item-card:hover { box-shadow:inset 0 0 0 1px rgba(243,210,132,.42); }
.housing-thumb { display:block; width:64px; height:64px; object-fit:contain; border-radius:3px; background:radial-gradient(ellipse at 50% 58%,rgba(186,128,55,.2),rgba(0,0,0,.28) 72%); }
.housing-thumb-empty { display:grid; place-items:center; color:#8b7556; font:700 22px Cinzel,Georgia,serif; }
.housing-item-copy { min-width:0; } .housing-item-copy h3 { font-size:14px; line-height:1.2; } .housing-item-copy p { margin:3px 0 4px; color:#a99c85; font-size:12px; } .housing-item-copy p span { color:#c9e0a8; } .housing-item-copy b { color:#f0cf81; font:600 13px Georgia,serif; font-variant-numeric:tabular-nums; }
.housing-item-actions { grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:6px; } #housingUI#housingUI .housing-item-actions button { min-height:36px; padding:5px 8px; font-size:13px; white-space:nowrap; }
.housing-empty { grid-column:1 / -1; padding:28px 12px; border:1px dashed rgba(211,165,81,.28); border-radius:3px; color:#a99c85; text-align:center; }
/* The contextual Decorate button and the toolbar share the top centre, between the hero card and the minimap. */
.hud-decorate { position:fixed; z-index:30; top:12px; left:50%; transform:translateX(-50%) scale(var(--ui-zoom,1)); transform-origin:top center; pointer-events:auto; }
#ui #decorateBtn.hud-decorate { min-height:38px; margin:0; padding:7px 18px; border:1px solid #d6a653; border-image:none; border-radius:19px; background:linear-gradient(#6b4119,#3a220d); color:#fff1cf; font:700 14px/1.2 Cinzel,Georgia,serif; letter-spacing:.04em; box-shadow:0 4px 14px rgba(0,0,0,.55),inset 0 1px rgba(255,214,150,.3); cursor:pointer; }
#ui #decorateBtn.hud-decorate:hover { background:linear-gradient(#83522a,#4a2c12); }
.housing-editing #game { cursor:crosshair; }
#housingDecorateToolbar { position:fixed; z-index:47; top:10px; left:50%; width:458px; transform:translateX(-50%) scale(var(--ui-zoom,1)); transform-origin:top center; pointer-events:auto; color:#eadbc0; font:13px/1.3 Georgia,serif; -webkit-font-smoothing:antialiased; }
.housing-toolbar { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 10px; padding:8px 10px; border:1px solid #97733f; border-radius:6px; background:linear-gradient(160deg,rgba(46,32,20,.97),rgba(18,12,8,.97)); box-shadow:0 2px 0 #0d0906,0 12px 30px rgba(0,0,0,.5),inset 0 1px rgba(255,231,174,.1); }
.housing-toolbar-status { display:flex; align-items:center; gap:8px; min-width:0; } .housing-toolbar-status > div { display:grid; min-width:0; }
.housing-toolbar-status span { color:#ae9160; font:700 10px/1.3 Cinzel,Georgia,serif; letter-spacing:.05em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.housing-toolbar-status b { color:#f2d796; font:700 14px/1.25 Cinzel,Georgia,serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.housing-thumb.small { width:34px; height:34px; flex:0 0 34px; } .housing-thumb.tiny { width:30px; height:30px; background:none; }
.housing-toolbar-actions { display:flex; align-items:center; gap:4px; }
#housingDecorateToolbar#housingDecorateToolbar button { margin:0; min-height:34px; padding:4px 8px; border:1px solid #907044; border-image:none; border-radius:3px; background:linear-gradient(#3d2d1d,#22180f); color:#eadbbd; font:13px/1.2 Georgia,serif; white-space:nowrap; cursor:pointer; }
#housingDecorateToolbar#housingDecorateToolbar button:hover:not(:disabled) { border-color:#d8b579; background:linear-gradient(#4d3822,#312115); }
#housingDecorateToolbar#housingDecorateToolbar button:disabled { opacity:.42; cursor:default; }
#housingDecorateToolbar#housingDecorateToolbar .housing-done { border-color:#d6a653; background:linear-gradient(#6b4119,#3a220d); color:#fff1cf; }
.housing-toolbar-actions small { color:#e9c77e; font-size:11px; }
.housing-toolbar-picker { grid-column:1 / -1; display:flex; align-items:center; gap:4px; padding-top:6px; border-top:1px solid rgba(211,165,81,.2); }
#housingDecorateToolbar#housingDecorateToolbar .housing-toolbar-picker > button:not(.housing-toolbar-shop):not(.housing-toolbar-walls) { position:relative; width:36px; height:36px; min-height:36px; padding:2px; }
#housingDecorateToolbar#housingDecorateToolbar .housing-toolbar-picker > button.active { border-color:#f0c56c; box-shadow:inset 0 0 0 1px #f0c56c; }
.housing-toolbar-picker > button > span { position:absolute; right:1px; bottom:0; min-width:12px; padding:0 3px; border-radius:7px; background:#160f0a; color:#f2d796; font:10px/14px Georgia,serif; }
.housing-toolbar-empty { color:#9d8e76; font-size:12px; white-space:nowrap; }
#housingDecorateToolbar.housing-below-card,#ui #decorateBtn.housing-below-card { top:calc(24px + 94px * var(--ui-zoom,1)); }
#housingDecorateToolbar#housingDecorateToolbar .housing-toolbar-shop,#housingDecorateToolbar#housingDecorateToolbar .housing-toolbar-walls { margin-left:auto; min-height:36px; } #housingDecorateToolbar#housingDecorateToolbar .housing-toolbar-walls + .housing-toolbar-shop { margin-left:0; } #housingDecorateToolbar#housingDecorateToolbar .housing-toolbar-walls[aria-pressed="true"] { border-color:#d6a653; color:#fff1cf; }
@media (max-width:760px) { .housing-plan-grid { grid-template-columns:1fr; } .housing-plan-card { grid-template-columns:110px minmax(0,1fr); } .housing-plan-preview .housing-thumb { width:104px; height:104px; } .housing-head { flex-wrap:wrap; } #housingDecorateToolbar { width:calc(100vw - 24px); top:auto; bottom:calc(var(--hud-height) + 200px); transform:translateX(-50%); } }