/* FAD OS Extras — toasts · collection · screensaver
   Uses the OS shell's CSS vars: --chrome --ink --line --paper --accent
   --accent-hot --shadow --px --mono etc.                              */

/* ---------- ✦ entry ---------- */
.shiny-entry{
  appearance:none;background:none;border:1.5px solid transparent;
  color:var(--ink-soft);font:inherit;font-size:14px;line-height:1;
  padding:3px 7px;cursor:pointer;position:relative;
  transition:color .18s ease,border-color .18s ease,transform .18s ease;
}
.shiny-entry:hover{color:var(--accent);border-color:var(--line);transform:rotate(22deg)}
.shiny-entry.fresh::after{
  content:"";position:absolute;top:1px;right:1px;width:6px;height:6px;
  background:var(--accent-hot,--accent);border:1px solid var(--paper);
  animation:shinyPing 2.2s steps(2) infinite;
}
@keyframes shinyPing{50%{opacity:.25}}
.pda-dock .shiny-entry{font-size:17px;padding:6px 10px}

/* ---------- toasts ---------- */
.fad-toast-host{
  position:fixed;top:calc(var(--bar-h, 40px) + 12px);right:12px;z-index:2600;
  display:flex;flex-direction:column;gap:10px;pointer-events:none;
  max-width:min(360px,calc(100vw - 24px));
}
.fad-toast{
  pointer-events:auto;display:flex;flex-direction:column;
  background:var(--chrome);border:1.5px solid var(--line);
  box-shadow:var(--shadow, 4px 4px 0 rgba(28,27,20,.22));
  transform:translateX(calc(100% + 24px));opacity:0;
  transition:transform .38s cubic-bezier(.2,.9,.25,1.15),opacity .3s ease;
}
.fad-toast.in{transform:translateX(0);opacity:1}
.fad-toast.out{transform:translateX(calc(100% + 24px));opacity:0}
.fad-toast.clickable{cursor:pointer}
.fad-toast .t-strip{
  height:7px;border-bottom:1.5px solid var(--line);
  background:repeating-linear-gradient(90deg,var(--accent) 0 6px,transparent 6px 12px);
}
.fad-toast.shiny .t-strip{
  background:repeating-linear-gradient(90deg,
    #FF6BD8 0 8px,#FFD86B 8px 16px,#6BE8D8 16px 24px,#8B9BFF 24px 32px);
  animation:shinyStrip 1.4s steps(4) infinite;
}
@keyframes shinyStrip{to{background-position:32px 0}}
.fad-toast.ach .t-strip{
  background:repeating-linear-gradient(90deg,var(--accent-hot,var(--accent)) 0 4px,transparent 4px 8px);
}
.fad-toast .t-body{display:flex;align-items:flex-start;gap:10px;padding:10px 12px}
.fad-toast .t-icon{
  font-family:var(--px,monospace);font-size:18px;line-height:1.2;color:var(--accent);
}
.fad-toast.shiny .t-icon{animation:shinySpin 2.8s steps(8) infinite}
@keyframes shinySpin{to{transform:rotate(360deg)}}
.fad-toast .t-text{flex:1;min-width:0}
.fad-toast .t-line{
  font-family:var(--px,monospace);font-size:13px;letter-spacing:.02em;color:var(--ink);
}
.fad-toast .t-hint{
  margin-top:3px;font-family:var(--mono,monospace);font-size:11px;color:var(--ink-faint);
}
.fad-toast .t-close{
  appearance:none;background:none;border:none;color:var(--ink-faint);
  font:inherit;font-size:11px;cursor:pointer;padding:2px 4px;margin:-2px -4px 0 0;
}
.fad-toast .t-close:hover{color:var(--ink)}

/* ---------- collection panel ---------- */
.fad-shiny-panel{
  position:fixed;z-index:2500;left:50%;top:50%;
  width:min(520px,calc(100vw - 28px));
  transform:translate(-50%,-46%) scale(.96);opacity:0;
  transition:transform .3s cubic-bezier(.2,.9,.3,1.1),opacity .24s ease;
}
.fad-shiny-panel.in{transform:translate(-50%,-50%) scale(1);opacity:1}
.fad-shiny-panel .sp-body{padding:14px}
.sp-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;
}
.sp-cell{
  border:1.5px solid var(--line);background:var(--paper);
  padding:8px;display:flex;flex-direction:column;gap:7px;position:relative;
  opacity:.42;filter:grayscale(.9);
  transition:opacity .2s ease,filter .2s ease,transform .2s ease;
}
.sp-cell.got{opacity:1;filter:none}
.sp-cell.got:hover{transform:translateY(-2px)}
.sp-swatch{
  height:34px;border:1px solid var(--line);
  background:
    repeating-conic-gradient(rgba(0,0,0,.12) 0% 25%,transparent 0% 50%) 0 0/6px 6px,
    linear-gradient(112deg,var(--sw-day,#888) 0 52%,var(--sw-night,#333) 52% 100%);
}
.sp-aurora .sp-swatch{
  background:
    repeating-conic-gradient(rgba(0,0,0,.14) 0% 25%,transparent 0% 50%) 0 0/6px 6px,
    linear-gradient(112deg,#FF6BD8 0 22%,#FFD86B 22% 42%,#6BE8D8 42% 64%,#8B9BFF 64% 84%,#FF6BD8 84% 100%);
}
.sp-cell.sp-aurora.got .sp-swatch{animation:auroraShift 3.2s steps(6) infinite}
@keyframes auroraShift{50%{filter:hue-rotate(40deg) saturate(1.2)}}
.sp-label{
  font-family:var(--mono,monospace);font-size:10.5px;letter-spacing:.03em;
  color:var(--ink-soft);text-transform:lowercase;
}
.sp-count{
  position:absolute;top:4px;right:5px;
  font-family:var(--mono,monospace);font-size:9.5px;color:var(--ink-faint);
}
.sp-foot{
  margin-top:13px;padding-top:10px;border-top:1px dashed var(--line);
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-family:var(--mono,monospace);font-size:11px;color:var(--ink-soft);
}
.sp-foot b{color:var(--accent);font-weight:700}
.sp-tip{color:var(--ink-faint)}

/* ---------- screensaver ---------- */
.fad-saver{
  position:fixed;inset:0;z-index:4000;background:var(--paper);
  opacity:0;transition:opacity 1.1s ease;cursor:pointer;
}
.fad-saver.in{opacity:1}
.fad-saver.out{opacity:0;transition:opacity .5s ease}
.fad-saver iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
  pointer-events:none;background:transparent;
}
.fad-saver .sv-veil{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;padding-bottom:7vh;
  pointer-events:none;gap:8px;
}
.fad-saver .sv-clock{
  font-family:var(--px,monospace);font-size:clamp(28px,5vw,52px);
  letter-spacing:.08em;color:var(--ink);
  text-shadow:0 0 14px var(--paper),0 0 4px var(--paper);
  animation:svBreath 7.2s ease-in-out infinite;
}
@keyframes svBreath{50%{opacity:.68}}
.fad-saver .sv-stamp{
  font-family:var(--mono,monospace);font-size:11px;letter-spacing:.14em;
  color:var(--ink-faint);text-transform:uppercase;
}
.fad-saver .sv-shiny{color:var(--accent-hot,var(--accent));font-weight:700}
.fad-saver.shiny .sv-clock{
  animation:svBreath 7.2s ease-in-out infinite,svHue 5.6s linear infinite;
}
@keyframes svHue{to{filter:hue-rotate(360deg)}}

/* ---------- responsive / motion ---------- */
@media (max-width:1279px){
  .fad-toast-host{top:auto;bottom:calc(64px + env(safe-area-inset-bottom,0px));right:10px;left:10px;max-width:none}
  .fad-toast{transform:translateY(calc(100% + 20px))}
  .fad-toast.in{transform:translateY(0)}
  .fad-toast.out{transform:translateY(calc(100% + 20px))}
  .fad-shiny-panel{top:auto;bottom:calc(60px + env(safe-area-inset-bottom,0px));transform:translate(-50%,6%) scale(.97)}
  .fad-shiny-panel.in{transform:translate(-50%,0) scale(1)}
  .sp-grid{grid-template-columns:repeat(3,1fr)}
  .menubar .sys .shiny-entry{display:none}
}
@media (prefers-reduced-motion:reduce){
  .fad-toast,.fad-shiny-panel,.fad-saver{transition:none}
  .fad-toast.shiny .t-strip,.fad-toast.shiny .t-icon,
  .sp-cell.sp-aurora.got .sp-swatch,.fad-saver .sv-clock,.shiny-entry.fresh::after{animation:none}
}

/* ---------- tablet/PDA ergonomics ---------- */
@media (max-width:1279px){
  :root{--bar-h:44px}
  .menubar .brand{min-height:44px}
  .theme-switcher{gap:2px;padding:0 2px}
  .theme-switcher button{
    width:44px;height:44px;border:0;border-radius:0;background:transparent;
    box-shadow:none;position:relative;
  }
  .theme-switcher button::before{
    content:"";position:absolute;left:50%;top:50%;width:17px;height:17px;
    transform:translate(-50%,-50%);border:1.5px solid var(--line);
    border-radius:50%;background:var(--chrome);
  }
  .theme-switcher button.active,
  .theme-switcher button[aria-pressed=true]{background:transparent;box-shadow:none}
  .theme-switcher button.active::before,
  .theme-switcher button[aria-pressed=true]::before{
    background:var(--ink);box-shadow:0 0 0 2px var(--chrome),0 0 0 3.5px var(--ink);
  }
  .theme-switcher button:hover{transform:none}
  .theme-switcher button:hover::before{transform:translate(-50%,calc(-50% - 1px))}
  .theme-switcher .mode-icon{position:relative;z-index:1}
  body.home .pda-home{
    grid-template-columns:repeat(5,minmax(0,1fr));
    width:min(820px,100%);
    margin:0 auto;
  }
  .btn{min-height:44px;justify-content:center}
  .titlebar{min-height:44px}
  .titlebar .win-btn{position:relative;width:44px;height:44px}
  .titlebar .win-btn::before{content:"";position:absolute;inset:0}
  .pda-dock .home-btn,
  .pda-dock .fm-play,
  .pda-dock .fm-next,
  .pda-dock .lang-switch{width:44px;height:44px}
  .pda-dock .shiny-entry{width:44px;height:44px;padding:0}
}

@media (max-width:620px){
  body.home .pda-home{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------- opening desktop layout ---------- */
@media (min-width: 1280px) and (max-width: 1599px) {
  body.home #win-tools {
    top: 540px !important;
  }
}

@media (min-width: 1600px) and (min-height: 820px) {
  body.home #win-hello {
    left: clamp(132px, 8.5vw, 176px) !important;
    top: clamp(78px, 9.5vh, 110px) !important;
    width: min(640px, 40vw) !important;
    z-index: 22 !important;
  }

  body.home #win-archive {
    left: clamp(860px, 55.5vw, 1136px) !important;
    right: auto !important;
    top: clamp(124px, 13.8vh, 160px) !important;
    width: min(548px, 31vw) !important;
    z-index: 21 !important;
  }

  body.home #win-fm {
    left: auto !important;
    right: clamp(32px, 2.5vw, 52px) !important;
    top: clamp(236px, 24vh, 276px) !important;
    bottom: auto !important;
    width: 328px !important;
    z-index: 23 !important;
  }

  body.home #win-tools {
    left: clamp(176px, 10.8vw, 220px) !important;
    top: clamp(500px, 54.8vh, 632px) !important;
    width: min(710px, 38vw) !important;
    z-index: 20 !important;
  }

  body.home #win-games {
    left: clamp(720px, 44.5vw, 910px) !important;
    top: clamp(472px, 49vh, 566px) !important;
    width: min(500px, 28vw) !important;
    z-index: 26 !important;
  }
}

/* ---------- submit button ---------- */
.submit-beatarray {
  background: #FFD92E;
  border-color: var(--line);
  color: #1C1B14;
  gap: 8px;
  font-weight: 700;
}
.submit-beatarray img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}
.submit-beatarray:hover {
  background: #FFE96A;
  color: #1C1B14;
  text-decoration: none;
}
[data-theme=carbon] .submit-beatarray,
[data-theme=cyanotype] .submit-beatarray,
[data-theme=aurora] .submit-beatarray {
  box-shadow: 0 0 0 1px var(--line), 4px 4px 0 rgba(255, 217, 46, .26);
}

/* ---------- Game UI Cleanup ---------- */

/* Window resize handle */
.resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  cursor: nwse-resize;
  z-index: 10;
}

.resize-handle::after {
  content: '';
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  background:
    linear-gradient(135deg, transparent 0%, transparent 40%, var(--line) 40%, var(--line) 45%, transparent 45%),
    linear-gradient(135deg, transparent 0%, transparent 55%, var(--line) 55%, var(--line) 60%, transparent 60%),
    linear-gradient(135deg, transparent 0%, transparent 70%, var(--line) 70%, var(--line) 75%, transparent 75%);
}

/* A Dark Room - Hide unnecessary elements */
#storesContainer,
#dropdownMenu {
  display: none !important;
}

/* A Dark Room header - Keep only Save and GitHub */
#header .lightsOff,
#header .hyper {
  display: none !important;
}

/* Hide language and night mode toggles in games (inherit from parent OS) */
#header .menuBtn[onclick*="language"],
#header .menuBtn[onclick*="toggleLights"] {
  display: none !important;
}