@font-face { font-family: 'Fredoka'; src: url(fonts/fredoka.woff2) format('woff2'); font-weight: 300 700; font-display: swap; }
:root { --cy: #3ff0ff; --cy2: #1aa6b8; --pk: #ff6fd8; --bg: #0a0d18; --pn: #0d1626; --ln: rgba(63, 240, 255, .55); --tb: 46px; --bb: 66px; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b0614; color: #e8f9ff; font-family: 'Fredoka', system-ui, sans-serif; user-select: none; -webkit-user-select: none; touch-action: none; overscroll-behavior: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; touch-action: manipulation; }
.hidden { display: none !important; }
#cv { position: fixed; inset: 0; display: block; touch-action: none; }
/* ---------- top bar ---------- */
#top { position: fixed; top: 0; left: 0; right: 0; height: calc(var(--tb) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 8px 0; display: flex; align-items: center; gap: 8px; z-index: 5;
  background: linear-gradient(#07121ef2, #0a1422d9); border-bottom: 2px solid var(--ln); box-shadow: 0 2px 14px rgba(63, 240, 255, .18); }
.ibtn { width: 38px; height: 38px; border-radius: 10px; border: 2px solid var(--ln); background: #0b1b2b; font-size: 18px; display: grid; place-items: center; flex: none; }
.ibtn:active, .act:active, .slot:active, .big:active, .tile:active { transform: scale(.94); }
#floors { flex: 1; display: flex; gap: 4px; justify-content: center; min-width: 0; }
#floors button { flex: 1; max-width: 120px; height: 34px; border-radius: 10px; border: 2px solid rgba(63, 240, 255, .35); background: #0b1b2b; font-weight: 600; font-size: 14px; color: #bfefff; white-space: nowrap; }
#floors button[data-floor=house] { flex: 0 0 44px; }
#floors button.on { background: linear-gradient(#1aa6b8, #0d6f86); border-color: var(--cy); color: #fff; box-shadow: 0 0 10px rgba(63, 240, 255, .55); }
/* ---------- bottom bar ---------- */
#bottom { position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--bb) + env(safe-area-inset-bottom)); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); display: flex; gap: 6px; align-items: center; z-index: 5;
  background: linear-gradient(#0a1422d9, #07121ef5); border-top: 2px solid var(--ln); box-shadow: 0 -2px 14px rgba(63, 240, 255, .18); }
.big { flex: none; width: 58px; height: 52px; border-radius: 12px; border: 2px solid var(--cy); background: linear-gradient(#123049, #0b1b2b); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; box-shadow: 0 0 8px rgba(63, 240, 255, .35); }
.big i { font-style: normal; font-size: 21px; } .big b { font-size: 11px; font-weight: 600; margin-top: 3px; color: #bfefff; }
#tray { flex: 1; min-width: 0; height: 100%; display: flex; gap: 6px; align-items: center; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; touch-action: pan-x; }
#tray::-webkit-scrollbar { display: none; }
.slot { flex: none; width: 50px; height: 50px; border-radius: 10px; border: 2px solid rgba(63, 240, 255, .45); background: #0b1622; display: grid; place-items: center; padding: 3px; }
.slot img { max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none; }
.slot.empty { opacity: .5; }
.act { flex: 1 1 0; min-width: 0; max-width: 110px; overflow: hidden; height: 52px; padding: 0 4px; border-radius: 12px; border: 2px solid rgba(63, 240, 255, .6); background: #0b1b2b; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; white-space: nowrap; }
.act i { font-style: normal; font-size: 19px; } .act b { font-size: 11px; font-weight: 600; margin-top: 3px; color: #d6f6ff; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 400px) { .act b { font-size: 10px; } #tray.actions { gap: 3px; } }
#bottom.sel .big { display: none; }
#tray.actions { gap: 4px; }
.act.use { background: linear-gradient(#b0359a, #72207a); border-color: var(--pk); box-shadow: 0 0 10px rgba(255, 111, 216, .45); }
.act.del { border-color: #ff6b8a; color: #ffd0da; } .act.done { border-color: var(--cy); background: #0f3446; }
#selname { position: fixed; left: 8px; bottom: calc(var(--bb) + env(safe-area-inset-bottom) + 6px); z-index: 6; padding: 3px 10px; border-radius: 10px; background: #0d1a2ae6; border: 1.5px solid var(--ln); color: var(--cy); font-size: 13px; font-weight: 600; pointer-events: none; max-width: 60vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ---------- tips / toast / paint ---------- */
#tip { position: fixed; left: 50%; top: calc(var(--tb) + env(safe-area-inset-top) + 10px); transform: translateX(-50%); z-index: 6; width: min(92vw, 520px); padding: 10px 14px; border-radius: 14px; background: #1b0f2ee8; border: 2px solid var(--pk); font-size: 14px; text-align: center; pointer-events: none; transition: opacity .4s; }
#tip.hide { opacity: 0; }
#toast { position: fixed; left: 50%; bottom: calc(var(--bb) + env(safe-area-inset-bottom) + 12px); transform: translate(-50%, 20px); z-index: 8; max-width: 92vw; padding: 9px 14px; border-radius: 14px; background: #0d1a2af2; border: 2px solid var(--ln); font-size: 14px; display: flex; gap: 10px; align-items: center; opacity: 0; pointer-events: none; transition: .25s; }
#toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.tbtn { padding: 5px 12px; border-radius: 10px; background: var(--pk); color: #1a0620; font-weight: 700; }
#paintbar { position: fixed; left: 50%; top: calc(var(--tb) + env(safe-area-inset-top) + 8px); transform: translateX(-50%); z-index: 6; display: flex; gap: 10px; align-items: center; padding: 6px 6px 6px 14px; border-radius: 14px; background: #0d1a2af2; border: 2px solid var(--cy); box-shadow: 0 0 14px rgba(63, 240, 255, .4); white-space: nowrap; font-size: 14px; }
#paintbar button { padding: 7px 12px; border-radius: 10px; background: var(--cy2); font-weight: 700; }
/* ---------- overlays / panels ---------- */
.overlay { position: fixed; inset: 0; z-index: 10; background: rgba(4, 2, 10, .62); display: flex; align-items: center; justify-content: center; padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)); }
.panel { background: linear-gradient(#0c1828, #08111d); border: 2px solid var(--cy); border-radius: 18px; box-shadow: 0 0 24px rgba(63, 240, 255, .35), inset 0 0 18px rgba(63, 240, 255, .08); }
.panel h2 { margin: 0; font-size: 20px; color: var(--cy); text-shadow: 0 0 8px rgba(63, 240, 255, .6); letter-spacing: .5px; }
.panel.small { width: min(380px, 94vw); padding: 18px; display: flex; flex-direction: column; gap: 10px; max-height: 94vh; overflow: auto; }
.panel.small button { height: 46px; border-radius: 12px; border: 2px solid var(--ln); background: #0b1b2b; font-size: 16px; font-weight: 600; flex: none; }
button.pri { background: linear-gradient(#1aa6b8, #0d6f86) !important; border-color: var(--cy) !important; color: #fff; }
button.danger { border-color: #ff6b8a !important; color: #ffd0da; }
.panel p { margin: 4px 0 8px; line-height: 1.4; }
.help ul { margin: 0; padding-left: 18px; line-height: 1.4; font-size: 14px; } .help li { margin-bottom: 6px; } .help b { color: var(--pk); }
/* catalogue */
.panel.cat { width: min(1000px, 100%); height: min(660px, 100%); display: flex; flex-direction: column; overflow: hidden; }
#cattabs { display: flex; gap: 5px; padding: 8px; overflow-x: auto; flex: none; scrollbar-width: none; touch-action: pan-x; border-bottom: 2px solid rgba(63, 240, 255, .25); }
#cattabs::-webkit-scrollbar { display: none; }
.ctab { flex: none; width: 76px; height: 58px; border-radius: 10px; border: 2px solid rgba(63, 240, 255, .4); background: #0b1622; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.ctab i { font-style: normal; font-size: 21px; } .ctab b { font-size: 10px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: #bfefff; }
.ctab.on { border-color: var(--cy); background: linear-gradient(#124a5c, #0b2434); box-shadow: 0 0 12px rgba(63, 240, 255, .55); }
.cathead { display: flex; align-items: center; gap: 8px; padding: 8px 10px; flex: none; }
.cathead h2 { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 18px; } .cathead h2 i { font-style: normal; } .cathead small { font-size: 12px; color: #bfefff; text-shadow: none; }
.search { position: relative; width: min(240px, 42vw); } .search input { width: 100%; height: 36px; border-radius: 10px; border: 2px solid var(--ln); background: #071019; color: #e8f9ff; padding: 0 30px 0 10px; font: inherit; font-size: 15px; outline: none; user-select: text; -webkit-user-select: text; touch-action: manipulation; }
.search span { position: absolute; right: 8px; top: 7px; font-size: 14px; pointer-events: none; }
.catbody { flex: 1; min-height: 0; display: flex; gap: 8px; padding: 0 8px 8px; }
#catside { flex: none; width: 108px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; touch-action: pan-y; }
.filt { height: 40px; border-radius: 10px; border: 2px solid rgba(63, 240, 255, .4); background: #0b1622; text-align: left; padding: 0 8px; font-size: 13px; font-weight: 600; display: flex; gap: 6px; align-items: center; flex: none; }
.filt i { font-style: normal; width: 18px; text-align: center; } .filt.on { border-color: var(--cy); background: #124a5c; }
#catgrid { flex: 1; min-width: 0; overflow-y: auto; touch-action: pan-y; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); grid-auto-rows: 108px; gap: 8px; align-content: start; padding: 2px; overscroll-behavior: contain; }
#catgrid::-webkit-scrollbar { width: 10px; } #catgrid::-webkit-scrollbar-thumb { background: var(--cy2); border-radius: 6px; }
.tile { position: relative; border-radius: 10px; border: 2px solid rgba(63, 240, 255, .4); background: radial-gradient(circle at 50% 40%, #1a2440, #0a111c); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 5px 4px 4px; overflow: hidden; }
.tile img { flex: 1; min-height: 0; max-width: 100%; object-fit: contain; pointer-events: none; }
.tile .nm { font-size: 11px; line-height: 1.1; text-align: center; color: #d6f6ff; height: 25px; display: flex; align-items: center; }
.tile.ch { border-color: rgba(255, 111, 216, .55); padding: 0 0 4px; } .tile.ch img { width: 100%; object-fit: cover; }
.tile em { position: absolute; top: 4px; left: 4px; font-style: normal; font-size: 10px; background: var(--pk); color: #1a0620; padding: 1px 5px; border-radius: 6px; font-weight: 700; }
.tile.sw .swatch { flex: 1; width: 100%; border-radius: 7px; border: 1px solid rgba(255, 255, 255, .2); }
.tile.cur { border-color: var(--pk); box-shadow: 0 0 10px rgba(255, 111, 216, .6); }
.empty { grid-column: 1 / -1; text-align: center; opacity: .7; }
/* outfit studio */
.panel.fit { width: min(820px, 100%); height: min(560px, 100%); display: flex; flex-direction: column; overflow: hidden; }
.fithead { display: flex; align-items: center; gap: 10px; padding: 10px; flex: none; } .fithead h2 { flex: 1; text-align: center; }
.fitbody { flex: 1; min-height: 0; display: flex; gap: 10px; padding: 0 10px 10px; }
.fitleft { flex: none; width: 220px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
#fitprev { width: 200px; height: 272px; border-radius: 14px; border: 2px solid rgba(255, 111, 216, .55); }
.fitbtns { display: flex; gap: 6px; width: 100%; } .fitbtns button { flex: 1; height: 42px; border-radius: 12px; border: 2px solid var(--ln); background: #0b1b2b; font-weight: 600; font-size: 14px; }
.fitright { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#fittabs { display: flex; gap: 5px; overflow-x: auto; flex: none; padding-bottom: 6px; scrollbar-width: none; touch-action: pan-x; }
.ftab { flex: none; height: 36px; padding: 0 12px; border-radius: 10px; border: 2px solid rgba(63, 240, 255, .4); background: #0b1622; font-weight: 600; font-size: 14px; }
.ftab.on { border-color: var(--pk); background: #4a1846; }
#fitopts { flex: 1; overflow-y: auto; touch-action: pan-y; padding-right: 4px; }
#fitopts h4 { margin: 8px 0 6px; font-size: 13px; color: var(--cy); text-transform: uppercase; letter-spacing: .6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip { height: 36px; padding: 0 12px; border-radius: 18px; border: 2px solid rgba(63, 240, 255, .4); background: #0b1622; font-size: 14px; }
.chip.on { border-color: var(--pk); background: #7a2272; color: #fff; }
.sws { display: flex; flex-wrap: wrap; gap: 7px; } .swb { width: 36px; height: 36px; border-radius: 50%; border: 3px solid #0a0f18; box-shadow: 0 0 0 2px rgba(63, 240, 255, .4); }
.swb.on { box-shadow: 0 0 0 3px var(--pk), 0 0 10px var(--pk); } .swb.none { background: #0b1622; font-size: 16px; }
.note { font-size: 13px; color: #ffc6ef; }
/* title + boot */
#title { position: fixed; inset: 0; z-index: 9; display: flex; align-items: center; justify-content: center; }
.tbg { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 30%, rgba(80, 30, 120, .35), transparent 60%), url(img/house.webp) center 40% / min(1100px, 150vw) auto no-repeat, linear-gradient(#07040f, #241038); filter: saturate(1.1); }
.tbg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(8, 4, 18, .35), rgba(8, 4, 18, .8)); }
.tcard { position: relative; text-align: center; padding: 22px 26px; border-radius: 22px; background: #0b1424d9; border: 2px solid var(--cy); box-shadow: 0 0 30px rgba(63, 240, 255, .4); width: min(420px, 92vw); display: flex; flex-direction: column; gap: 10px; }
.tcard h1 { margin: 0; font-size: 36px; line-height: 1; color: #fff; text-shadow: 0 0 12px var(--pk), 0 0 2px #000; } .tcard h1 small { display: block; font-size: 18px; color: var(--cy); text-shadow: 0 0 8px var(--cy); margin-bottom: 4px; }
.tcard p { margin: 0 0 6px; color: #d6c8ff; }
.tcard button { height: 50px; border-radius: 14px; border: 2px solid var(--ln); background: #0b1b2b; font-size: 18px; font-weight: 600; }
#boot { position: fixed; inset: 0; z-index: 20; background: #0b0614; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.spin { width: 44px; height: 44px; border-radius: 50%; border: 4px solid rgba(63, 240, 255, .25); border-top-color: var(--cy); animation: sp 1s linear infinite; } @keyframes sp { to { transform: rotate(360deg); } }
.bar { width: 200px; height: 8px; border-radius: 4px; background: #1a2030; overflow: hidden; } #loadbar { height: 100%; width: 0; background: linear-gradient(90deg, var(--cy), var(--pk)); }
@media (min-width: 900px) and (min-height: 600px) { #catgrid { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); grid-auto-rows: 138px; gap: 10px; } .tile .nm { font-size: 12px; } }
/* ---------- small screens ---------- */
@media (max-width: 520px) {
  #floors button { font-size: 13px; } .catbody { flex-direction: column; } #catside { width: auto; flex-direction: row; overflow-x: auto; overflow-y: hidden; touch-action: pan-x; } .filt { flex: none; }
  #catgrid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); grid-auto-rows: 96px; gap: 6px; }
  .ctab { width: 64px; height: 52px; } .ctab b { font-size: 9px; } .search { width: 44vw; }
  .fitbody { flex-direction: column; } .fitleft { width: 100%; flex-direction: row; align-items: center; } #fitprev { width: 150px; height: 204px; flex: none; } .fitbtns { flex-direction: column; justify-content: center; } .fitbtns button { flex: none; height: 48px; } .panel.fit { height: 100%; }
}
@media (max-height: 460px) {
  :root { --tb: 40px; --bb: 54px; }
  .ibtn { width: 32px; height: 32px; font-size: 16px; } #floors button { height: 30px; }
  .big { width: 52px; height: 44px; } .big i { font-size: 17px; } .big b { font-size: 10px; margin-top: 1px; }
  .slot { width: 42px; height: 40px; } .act { height: 40px; } .act i { font-size: 16px; } .act b { font-size: 10px; margin-top: 2px; }
  .ctab { height: 44px; width: 70px; } .ctab i { font-size: 17px; } .cathead { padding: 4px 8px; } .panel.cat { height: 100%; }
  #catgrid { grid-auto-rows: 92px; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .panel.fit { height: 100%; } #fitprev { width: 150px; height: 204px; } .fitleft { width: 160px; } .fitbtns { flex-direction: column; } .fitbtns button { height: 36px; }
  .tcard { padding: 12px 18px; gap: 6px; } .tcard h1 { font-size: 28px; } .tcard button { height: 42px; }
  .panel.small { padding: 12px; gap: 7px; } .panel.small button { height: 40px; }
}
/* ---- Witchestown account (v2) ---- */
button.acctbtn { border-color: #ff7ad9 !important; color: #ffd6f6; }
.tnote { font-size: 13px !important; line-height: 1.35; color: #bfefff !important; margin: 2px 0 0 !important; }
.tnote b { color: #fff; }
.acct input { width: 100%; height: 42px; border-radius: 10px; border: 2px solid var(--ln); background: #071019; color: #e8f9ff; padding: 0 10px; font: inherit; font-size: 16px; outline: none; user-select: text; -webkit-user-select: text; margin-bottom: 6px; }
.acct input:focus { border-color: var(--cy); }
.acct .row2, .askbtns { display: flex; gap: 8px; } .acct .row2 button { flex: 1; }
.askbtns { flex-direction: column; } #ask p b, .acct p b { color: #fff; }
.panel.small button.link { height: auto !important; border: 0 !important; background: none !important; color: var(--cy); text-decoration: underline; font-size: 14px; padding: 4px; }
.amsg { font-size: 14px; color: #d6c8ff; min-height: 1em; } .amsg.bad { color: #ffb3c4; } .amsg.warn { color: #ffd25a; }
#account, #ask { z-index: 12; }