/* ============================================================
   chito.fan — compact build add-ons
   home hub · a-icc screen · DM hub · hidden pages
   soft pixel webcore / dusty rose-lilac-grey
   ============================================================ */

/* ---------- home hub ---------- */
.home-hub{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.hub-card{position:relative;display:flex;flex-direction:column;gap:3px;justify-content:flex-end;
  min-height:104px;padding:14px;border-radius:14px;color:var(--cream);
  background:linear-gradient(160deg,rgba(58,31,77,.92),rgba(42,26,77,.92));
  border:2px solid rgba(255,158,209,.34);box-shadow:0 6px 0 rgba(35,8,55,.25),inset 0 0 0 1px rgba(255,255,255,.05);
  transition:transform .15s ease,border-color .15s ease;}
.hub-card:hover{transform:translateY(-3px);border-color:var(--bubble);}
.hub-card .hub-ico{font-size:24px;line-height:1;filter:drop-shadow(0 0 6px rgba(255,110,179,.5));}
.hub-card b{font-family:var(--disp);font-size:15px;}
.hub-card em{font-style:normal;font-size:10.5px;color:#d9c2ee;opacity:.85;}
.hub-dm{background:linear-gradient(160deg,rgba(255,46,136,.92),rgba(120,40,110,.92));border-color:rgba(255,212,234,.5);grid-row:span 1;}
.hub-screen{background:linear-gradient(160deg,rgba(127,227,255,.2),rgba(58,31,77,.92));}
.hub-badge{position:absolute;top:8px;right:8px;min-width:20px;height:20px;padding:0 6px;border-radius:11px;
  background:var(--toxic);color:#1d1233;font-family:var(--pixel);font-size:9px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 8px rgba(191,240,94,.7);}
.tab-dot{display:inline-block;width:7px;height:7px;margin-left:5px;border-radius:50%;background:var(--toxic);box-shadow:0 0 6px var(--toxic);vertical-align:middle;}

.home-screen-peek{display:grid;grid-template-columns:1fr 1.1fr;gap:14px;align-items:stretch;}
.home-screen-peek .hsp-img{border-radius:12px;overflow:hidden;border:2px solid rgba(255,158,209,.3);}
.home-screen-peek .hsp-img img{width:100%;height:100%;object-fit:cover;min-height:120px;}
.hsp-note{color:var(--mut);font-size:13px;margin-top:6px;}
.hsp-note a{color:var(--sick-pink);}

/* ---------- a-icc screen ---------- */
[data-room="screen"] .stage{max-width:1180px;}
.screen-stage{position:relative;min-height:min(74vh,640px);border-radius:18px;overflow:hidden;
  background:radial-gradient(120% 120% at 50% 10%,rgba(58,31,77,.5),rgba(20,12,34,.9));
  border:2px solid rgba(194,163,255,.3);box-shadow:inset 0 0 80px rgba(20,8,40,.6);}
.screen-veil{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 1px,transparent 1px 3px);mix-blend-mode:multiply;}
.scr-card{position:absolute;width:clamp(120px,20vw,210px);border-radius:12px;overflow:hidden;
  border:2px solid rgba(255,255,255,.18);box-shadow:0 10px 28px rgba(10,4,24,.55);
  animation:scrFloat 9s ease-in-out infinite;animation-delay:var(--d);opacity:.96;}
.scr-card img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.05);}
.scr-card.c1{left:6%;top:14%;transform:rotate(-5deg);}
.scr-card.c2{left:38%;top:8%;width:clamp(96px,14vw,150px);transform:rotate(4deg);}
.scr-card.c3{right:8%;top:18%;transform:rotate(6deg);}
.scr-card.c4{left:16%;bottom:8%;width:clamp(110px,16vw,180px);transform:rotate(3deg);}
.scr-card.c5{right:12%;bottom:10%;width:clamp(96px,13vw,140px);transform:rotate(-6deg);}
@keyframes scrFloat{0%,100%{transform:translateY(0) rotate(var(--r,0deg));}50%{transform:translateY(-14px) rotate(var(--r,0deg));}}
.scr-word{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--disp);font-size:clamp(15px,2.6vw,24px);color:#e9d8ff;letter-spacing:.16em;
  text-shadow:0 0 18px rgba(194,163,255,.6);opacity:.82;text-align:center;}
.scr-star{position:absolute;right:14px;bottom:12px;color:#cdbdf0;font-size:13px;opacity:.18;cursor:pointer;
  user-select:none;transition:transform .12s ease,opacity .12s ease;}
.scr-star:hover{opacity:.4;}

/* ---------- DM hub — same windowed language as the chat page ---------- */
.dm-layout{display:grid;grid-template-columns:320px minmax(0,1fr);gap:18px;align-items:start;}
.dm-listwin,.dm-threadwin{min-width:0;}
.dm-threadwin{display:flex;flex-direction:column;min-height:640px;}
.dm-listwin .win__body{display:flex;flex-direction:column;gap:10px;padding:12px;}
.dm-threadwin .win__body{display:flex;flex-direction:column;gap:12px;padding:12px;flex:1;min-height:0;}

.dm-search{display:grid;grid-template-columns:1fr auto;gap:8px;}
.dm-search .input{min-width:0;}
.dm-search-res{display:flex;flex-direction:column;gap:6px;max-height:240px;overflow:auto;
  border:2px dashed #ff9ccf;border-radius:14px;background:rgba(255,255,255,.6);padding:8px;}
.dm-found{display:flex;gap:9px;align-items:center;width:100%;text-align:left;border:2px solid transparent;
  background:#fff;border-radius:12px;padding:7px;cursor:pointer;box-shadow:0 2px 0 rgba(120,30,80,.1);transition:.12s;}
.dm-found:hover{border-color:#ff2e88;transform:translateX(2px);}
.dm-found img{width:34px;height:34px;border-radius:10px;object-fit:cover;border:1.5px solid #6b2350;flex:none;}
.dm-found span{display:flex;flex-direction:column;min-width:0;}
.dm-found b{font-family:var(--pixel);font-size:7.5px;color:#7a1148;}
.dm-found em{font-style:normal;font-size:11px;color:#7f5475;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.dm-list{display:flex;flex-direction:column;gap:8px;height:min(58vh,520px);min-height:300px;overflow:auto;padding-right:2px;}
.dm-conv{position:relative;display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;width:100%;
  text-align:left;border:2px solid #6b2350;border-radius:14px;background:linear-gradient(180deg,#fff,#fff0f8);
  padding:9px 10px;cursor:pointer;box-shadow:0 3px 0 rgba(120,30,80,.14);transition:.12s;}
.dm-conv:hover{transform:translateY(-2px);border-color:#ff2e88;}
.dm-conv.active{background:linear-gradient(180deg,#ff7bbb,#ff2e88);color:#fff;}
.dm-conv img{width:44px;height:44px;border-radius:12px;object-fit:cover;border:2px solid #6b2350;background:#fff;}
.dm-conv-mid{display:flex;flex-direction:column;min-width:0;gap:2px;}
.dm-conv-mid b{font-family:var(--pixel);font-size:8px;letter-spacing:.3px;color:#7a1148;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dm-conv.active .dm-conv-mid b{color:#fff;}
.dm-conv-mid em{font-style:normal;font-size:12px;color:#7f5475;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dm-conv.active .dm-conv-mid em{color:rgba(255,255,255,.85);}
.dm-conv-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none;}
.dm-conv-side i{font-style:normal;font-size:10px;color:#7f5475;}
.dm-conv.active .dm-conv-side i{color:rgba(255,255,255,.8);}
.dm-unread{min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:#bff05e;color:#1d1233;
  font-family:var(--pixel);font-size:8px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 8px rgba(191,240,94,.6);}
.dm-conv.active .dm-unread{background:#fff;color:#ff2e88;box-shadow:none;}
.dm-hint{padding:16px;border:2px dashed #ff9ccf;border-radius:14px;color:#7f5475;background:rgba(255,255,255,.62);
  font-weight:700;font-size:13px;line-height:1.5;}
.dm-hint.center{text-align:center;margin:auto;max-width:320px;}

.dm-thread-bar{display:flex;align-items:center;gap:9px;}
.dm-back{display:none;border:2px solid #fff;background:rgba(255,255,255,.25);border-radius:9px;width:26px;height:26px;
  line-height:1;font-size:18px;color:#fff;cursor:pointer;flex:none;padding:0;}
.dm-peer-ava{width:30px;height:30px;border-radius:9px;object-fit:cover;border:2px solid #fff;outline:2px solid #6b2350;flex:none;background:#2a1a4d;}
.dm-peer-id{display:flex;flex-direction:column;min-width:0;line-height:1.15;}
.dm-peer-id b{font-family:var(--pixel);font-size:8px;color:#fff;text-shadow:1px 1px #7a1148;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dm-peer-id em{font-style:normal;font-size:6.5px;font-family:var(--pixel);color:rgba(255,255,255,.85);}
.dm-peer-music{margin-left:auto;border:2px solid #fff;background:rgba(255,255,255,.25);border-radius:9px;
  width:26px;height:26px;color:#fff;font-size:13px;cursor:pointer;flex:none;}

.dm-log{height:min(58vh,520px);min-height:300px;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:9px;
  border:2px solid #6b2350;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,244,251,.84));
  box-shadow:0 2px 0 rgba(120,30,80,.12) inset;scroll-behavior:smooth;}
.dm-day{align-self:center;font-family:var(--pixel);font-size:7px;color:#7a1148;background:#fff;border:2px solid #ffb3da;
  padding:4px 9px;border-radius:999px;margin:4px 0;box-shadow:0 2px 0 rgba(120,30,80,.1);}
.dm-msg{max-width:82%;border:2px solid #ffb3da;border-radius:15px;background:#fff;padding:9px 11px;
  box-shadow:0 3px 0 rgba(120,30,80,.10);min-width:0;}
.dm-msg.in{align-self:flex-start;}
.dm-msg.own{align-self:flex-end;background:#f1fbff;border-color:#7fe3ff;}
.dm-msg p{margin:0;white-space:pre-wrap;color:#4b1740;font-weight:700;line-height:1.45;word-break:break-word;}
.dm-t{display:block;margin-top:5px;font-size:10px;color:#7f5475;text-align:right;font-weight:700;}
.dm-att{display:block;margin:0 0 6px;border-radius:11px;overflow:hidden;max-width:230px;border:2px solid #6b2350;}
.dm-att img{width:100%;max-height:240px;object-fit:cover;display:block;}

.dm-composer{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:end;position:relative;
  padding:10px;border:2px solid #ffb3da;border-radius:16px;background:linear-gradient(180deg,#fff,#fff2f9);}
.dm-composer .input{min-width:0;resize:none;max-height:120px;}
.dm-attach{position:relative;width:44px;height:44px;border-radius:11px;border:2px solid #6b2350;
  background:#fff;font-size:17px;cursor:pointer;box-shadow:0 3px 0 rgba(120,30,80,.12);flex:none;}
.dm-attach:hover{border-color:#ff2e88;}
.dm-attach.on{border-color:#8fd14a;background:#f4ffe4;}
.dm-attach-clear{display:none;position:absolute;top:-7px;right:-7px;width:17px;height:17px;border-radius:50%;
  background:#ff2e88;color:#fff;font-size:11px;line-height:17px;text-align:center;}
.dm-attach.on .dm-attach-clear{display:block;}
.dm-attach-prev{position:absolute;left:10px;bottom:56px;width:54px;height:54px;object-fit:cover;border-radius:9px;
  border:2px solid #8fd14a;box-shadow:0 4px 12px rgba(0,0,0,.3);}

/* profile compact track line */
.musicwrap.compact .track-line{display:flex;align-items:center;gap:9px;margin:10px 0 6px;}
.disc.tiny{width:26px;height:26px;flex:none;}
.musicwrap.compact .ptitle{font-family:var(--disp);font-size:14px;color:var(--void);}
.track-note{color:var(--mut);font-size:11.5px;line-height:1.45;}

/* hidden broken-pixel marker */
.egg-spot{position:fixed;right:5px;bottom:46px;width:6px;height:6px;line-height:6px;font-size:9px;color:rgba(120,90,134,.16);
  cursor:default;user-select:none;z-index:50;}
.egg-spot:hover{color:rgba(255,46,136,.35);}

/* ============================================================
   hidden pages
   ============================================================ */
.egg-body{min-height:100vh;overflow:hidden;background:#0d0816;}
.egg-body.egg-angel{background:radial-gradient(120% 100% at 50% 0%,#1a1330,#0a0612);}
.egg-body.egg-room{background:radial-gradient(120% 120% at 60% 40%,#2a1233,#0c0712);}
.egg-body.egg-error{background:#7a0a14;}
.egg-body.egg-after{background:radial-gradient(120% 120% at 40% 30%,#2b1740,#0c0712);}
.egg-body.egg-alive{background:#120a16;}
.egg-noise{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.10;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23n)'/%3E%3C/svg%3E");}
.egg-veil{position:fixed;inset:0;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px);mix-blend-mode:multiply;}
.egg-stage{position:relative;z-index:3;min-height:100vh;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;}
.egg-card{position:absolute;width:clamp(150px,26vw,300px);border:3px solid rgba(255,255,255,.14);border-radius:6px;
  overflow:hidden;box-shadow:0 14px 40px rgba(0,0,0,.6);animation:eggFloat 8s ease-in-out infinite;animation-delay:var(--d);}
.egg-card.big{width:clamp(220px,42vw,440px);}
.egg-card.mini{width:clamp(90px,14vw,150px);}
.egg-card img{width:100%;display:block;}
.egg-card.f-a{left:12%;top:16%;transform:rotate(-4deg);}
.egg-card.f-b{right:12%;bottom:14%;transform:rotate(5deg);}
.egg-card.f-c{left:50%;top:50%;transform:translate(-50%,-50%) rotate(-2deg);}
.egg-card.f-d{right:16%;top:20%;transform:rotate(7deg);}
.egg-card.f-e{left:50%;top:50%;transform:translate(-50%,-50%);}
.egg-card.f-f{left:50%;top:46%;transform:translate(-50%,-50%) rotate(-1deg);}
.egg-card.f-g{left:50%;top:48%;transform:translate(-50%,-50%);}
.egg-card.f-h{right:14%;bottom:16%;transform:rotate(-8deg);}
@keyframes eggFloat{0%,100%{filter:none;}50%{filter:hue-rotate(8deg) brightness(1.04);transform:translateY(-10px);}}
.egg-phrase{position:relative;z-index:4;font-family:var(--disp);font-size:clamp(18px,4vw,34px);color:#f3e7ff;
  letter-spacing:.06em;text-align:center;text-shadow:0 0 22px rgba(194,163,255,.7);padding:0 18px;}
.egg-error .egg-phrase{color:#ffe7b0;text-shadow:0 0 22px rgba(255,80,40,.8);}
.egg-sub{position:absolute;bottom:64px;left:50%;transform:translateX(-50%);z-index:4;
  font-family:var(--term);font-size:15px;color:rgba(233,216,255,.6);letter-spacing:.12em;text-align:center;width:90%;}
.egg-phrase.glitchy{position:relative;}
.egg-phrase.glitchy::before,.egg-phrase.glitchy::after{content:attr(data-t);position:absolute;left:0;top:0;width:100%;}
.egg-phrase.glitchy::before{color:#00fff2;transform:translate(-2px,0);mix-blend-mode:screen;animation:eggGl 2.2s infinite;}
.egg-phrase.glitchy::after{color:#ff0048;transform:translate(2px,0);mix-blend-mode:screen;animation:eggGl 1.7s infinite reverse;}
@keyframes eggGl{0%,100%{clip-path:inset(0 0 80% 0);}25%{clip-path:inset(40% 0 20% 0);}50%{clip-path:inset(70% 0 5% 0);}75%{clip-path:inset(20% 0 55% 0);}}
.egg-onward{position:absolute;z-index:5;color:rgba(255,255,255,.12);font-size:14px;text-decoration:none;
  right:18px;top:50%;padding:8px;}
.egg-onward:hover{color:rgba(255,110,179,.6);}
.egg-home{position:absolute;left:14px;bottom:12px;z-index:5;color:rgba(233,216,255,.35);font-size:18px;text-decoration:none;}
.egg-home:hover{color:#fff;}

/* ============================================================
   mobile / responsive — Android/Samsung Chrome, 360–430px
   ============================================================ */
@media (max-width:920px){
  .dm-wrap{grid-template-columns:1fr;position:relative;}
  .dm-side{border-right:none;}
  .dm-thread{position:absolute;inset:0;transform:translateX(100%);transition:transform .22s ease;z-index:6;}
  .dm-wrap.show-thread .dm-thread{transform:translateX(0);}
  .dm-back{display:block;}
  .dm-msg{max-width:84%;}
  .home-screen-peek{grid-template-columns:1fr;}
}
@media (max-width:680px){
  .home-hub{grid-template-columns:1fr 1fr;}
  .scr-card.c2,.scr-card.c5{display:none;}
  .screen-stage{min-height:62vh;}
  .egg-card.mini{display:none;}
}
@media (max-width:430px){
  .stage{padding:36px 10px 84px;}
  .home-hub{gap:9px;}
  .hub-card{min-height:92px;padding:11px;}
  .dm-wrap{min-height:calc(100vh - 200px);}
  .dm-log{padding:10px;}
  .dm-msg{font-size:13.5px;}
  .egg-phrase{font-size:clamp(16px,6vw,26px);}
}

/* ---------- mobile chrome: keep login reachable, keep dock out of the chat ---------- */
@media (max-width:720px){
  /* login/account must stay visible on phones (it is hidden by the base theme) */
  #chitoAccount{display:block!important;top:46px!important;bottom:auto!important;right:8px!important;left:auto!important;z-index:9950;max-width:62vw;}
  #chitoAccount summary{font-size:12px;}
  /* collapsed global player sits as a slim bar; give DM room above it */
  body[data-room="dm"] .stage{padding-bottom:64px;}
  #chitoDock.min .chdock{width:100%;}
}
@media (max-width:430px){
  #chitoAccount{top:44px!important;max-width:58vw;}
}