/*
  Circuit Princess OS — responsive mobile view

  Viewport-driven compact layouts live here, after the desktop and theme layers.
  Program container queries remain with their program styles. Mini has its own
  server-rendered page and mini.css, so its rules are intentionally separate.
*/

/* The mobile launcher is hidden until the responsive home view is active. */
.mobile-home { display: none; }

/* Media shelves: narrow cards and compact shelf navigation. */
@media(max-width:520px){.media-shelf-row{grid-auto-columns:minmax(135px,72vw)}.media-cover{height:155px}.media-shelf-nav{position:static}}

/* Main shell, windows, forms, and floor cards. */
@media(max-width:720px){:root{--taskbar-h:48px}.shortcuts{grid-template-rows:repeat(4,84px);grid-auto-columns:92px}.app-window,.app-window.maximized{inset:0!important;width:100%!important;height:100%!important;min-width:0;min-height:0;resize:none;border-width:2px;box-shadow:none}.app-window:not(.active){display:none}.window-content{padding:9px}.hero,.panelgrid,.article-list,.desk,.markdown-split,.map-grid,.appearance-previews,.diff-columns{grid-template-columns:1fr}.welcome h1{font-size:27px}.desk-list{max-height:150px}.task-entry{min-width:62px}.task-main{font-size:0}.task-main .task-icon{font-size:15px}.start-menu{bottom:var(--taskbar-h)}.submenu{position:static;width:100%;border:2px inset #eee}.form-grid{grid-template-columns:1fr}.form-grid label{padding:0}.wide{grid-column:auto}.markdown-split .editor-area,.markdown-split .preview-pane{min-height:230px}.file-properties dl{grid-template-columns:1fr}.article-pager{display:grid}.mobile-frame{max-width:none}}

@media(max-width:720px){.theme-review-row{grid-template-columns:1fr}.theme-mini{width:100%}.morgamp-display{display:grid}.media-stage{min-height:190px}.playlist-row{grid-template-columns:1fr auto}.playlist-row small{grid-column:1/-1}.start-menu{max-height:calc(100vh - var(--taskbar-h));overflow:auto}}

@media(max-width:480px){.boot-terminal{min-height:0;padding:17px}.boot-logo{font-size:38px}.boot-terminal h1{font-size:21px}.boot-log{min-height:150px;font-size:11px}.boot-actions{display:grid}.boot-actions button{margin:0}}

@media(max-width:720px){.game-toolbar{display:grid}.game-cartridge{grid-template-columns:44px 1fr}.game-cartridge strong{grid-column:2}.game-window .window-content{padding:0}}

/* Floor-world banner and library layout. */
@media(max-width:560px){.floor-world-banner{grid-template-columns:minmax(0,1fr) 78px;min-height:120px;padding:12px;gap:8px}.floor-world-seal{min-height:70px;padding:6px}.floor-world-seal>span{font-size:28px}.floor-world-seal>small{font-size:8px}.floor-library-heading{align-items:start;flex-direction:column;gap:2px}.floor-world-meta{font-size:9px}}

/* OS menus, shortcuts, taskbar, application switcher, and program interiors. */
@media(max-width:720px){.start-menu{left:4px;right:4px;width:auto;overflow:auto}.submenu{position:static;left:auto;top:auto;bottom:auto;width:100%;max-height:none;overflow:visible}}

@media(max-width:720px){#shortcuts{grid-template-columns:repeat(auto-fill,minmax(76px,1fr));padding:8px}}

@media(max-width:720px){#shortcuts.icons-column-arranged,body.compact-icons #shortcuts.icons-column-arranged{grid-template-columns:repeat(auto-fill,minmax(76px,1fr));grid-template-rows:none;grid-auto-flow:row;grid-auto-columns:auto;grid-auto-rows:88px;width:auto;height:auto;overflow-x:hidden;overflow-y:auto}}

@media(max-width:720px){body.compact-icons #shortcuts.icons-column-arranged{grid-template-columns:repeat(auto-fill,minmax(76px,1fr));grid-auto-rows:70px}}

@media(max-width:720px) and (pointer:coarse){#shortcuts .desktop-icon{touch-action:manipulation;-webkit-tap-highlight-color:transparent}}

@media(max-width:720px){
  :root{--taskbar-h:56px}
  .taskbar{height:var(--taskbar-h);gap:4px;padding:4px}
  .start-button,.app-switcher-button{height:44px;min-height:44px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:4px}
  .start-button{min-width:58px;padding:4px}
  .app-switcher-button{min-width:68px;padding:4px 8px}
  #task-items{display:none}
  .tray{min-height:44px;padding:4px 7px;margin-left:auto}
  .app-window .titlebar{min-height:56px;padding:4px 6px}
  .window-controls{gap:3px;align-self:stretch}
  .app-window .winbtn{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;font-size:18px;line-height:1}
  body[data-theme-style=y2k] .app-window .winbtn{font-size:0}
  body[data-theme-style=y2k] .app-window .winbtn::after{transform:none}
  body[data-theme-style=y2k] .app-window .winbtn:hover::after,
  body[data-theme-style=y2k] .app-window .winbtn:focus-visible::after{transform:scale(1.08)}
  .app-switcher{position:fixed;z-index:9600;left:6px;bottom:calc(var(--taskbar-h) + 6px);width:min(380px,calc(100vw - 12px));max-height:calc(100vh - var(--taskbar-h) - 12px);max-height:calc(100dvh - var(--taskbar-h) - 12px);overflow:auto;overscroll-behavior:contain;padding:5px;background:var(--silver);color:#111;border:3px outset #eee;box-shadow:5px 5px #0008}
  .app-switcher [role=menuitem]{display:grid;width:100%;min-height:48px;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:8px;padding:6px 9px;text-align:left;border:0;border-bottom:1px solid #777;white-space:normal}
  .app-switcher [role=menuitem]:last-child{border-bottom:0}
  .app-switcher [role=menuitem][aria-current=true]{background:#000080;color:#fff}
  .app-switcher [role=menuitem]:focus-visible{outline:3px dotted currentColor;outline-offset:-4px}
  .app-switcher-icon{font-size:22px;text-align:center}
  .app-switcher-name{min-width:0;overflow-wrap:anywhere;font-weight:bold}
  .app-switcher small{font-size:11px;white-space:nowrap;opacity:.85}
  .app-switcher-empty{margin:0;padding:10px}
  body[data-theme-style=y2k] .app-switcher{background:#ffd9efee;border:1px solid #fff;border-radius:15px;box-shadow:0 8px 22px #7652c766;backdrop-filter:blur(12px)}
  body[data-theme-style=y2k] .app-switcher [role=menuitem]{border-radius:9px;border-bottom-color:#d49abd;color:#573762}
  body[data-theme-style=y2k] .app-switcher [role=menuitem][aria-current=true]{background:linear-gradient(90deg,#7652c7,#ff52ae);color:#fff}
}

@media(max-width:720px){.auralith-screen{grid-template-columns:1fr}.auralith-screen aside{display:none}.sol-head{align-items:flex-start;gap:5px}.sol-stats{font-size:10px}.klondike-top{grid-template-columns:58px 58px 1fr minmax(226px,1fr);gap:5px}.sol-slot{width:58px;height:82px}.sol-foundations{gap:3px}.sol-tableau{grid-template-columns:repeat(7,minmax(43px,1fr));gap:3px;min-height:370px}.tableau-pile{height:360px}.playing-card{font-size:11px;left:2%;width:96%;height:74px;padding:3px}.playing-card i{display:none}.sol-drag-stack .playing-card{height:74px}.mine-grid{grid-template-columns:repeat(9,minmax(25px,34px))}.mine-grid button{width:100%;height:30px}}

@media(max-width:720px){.tray{gap:3px;padding:3px 5px}.tray-launch{flex-basis:30px;width:30px;height:32px;min-height:32px;padding:1px;font-size:17px}.tray-launch-icon .os-icon-image{width:21px;height:21px}.tray-divider{padding:0 1px}}

@media(max-width:360px){.start-button{min-width:50px}.app-switcher-button{min-width:50px;padding:4px}.quick-launch{gap:0}.tray-launch{flex-basis:26px;width:26px}.tray{gap:2px;padding:2px 3px}.tray-divider{font-size:15px}.tray time{font-size:13px}}

@media(max-width:720px){.pixel-studio{padding:0}.pixel-studio-layout{grid-template-columns:minmax(0,1fr)}.pixel-studio canvas{width:min(100%,min(72vw,420px))}.pixel-tools{grid-template-columns:repeat(2,minmax(0,1fr))}.pixel-tools>label,.pixel-tools output,.pixel-tools hr{grid-column:1/-1}.pixel-studio-note{font-size:10px}}

@media(max-width:720px){.tray-launch{flex-basis:27px;width:27px}}

@media(max-width:360px){.start-button{min-width:46px}.app-switcher-button{min-width:46px;padding:4px}.tray-launch{flex-basis:23px;width:23px}}

@media(max-width:720px){.forge-asset-grid,.forge-share-options{grid-template-columns:1fr}.theme-forge-intro{display:grid}.theme-forge-intro output{max-width:none}.theme-forge-footer{align-items:stretch;flex-direction:column;gap:6px}.theme-forge-panels{min-height:0}.forge-color-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media(max-width:720px){.theme-forge{gap:11px;padding:0}.theme-forge-intro{align-items:stretch;flex-direction:column;gap:9px}.theme-forge-intro output{flex-basis:auto;min-width:0;max-width:none}.theme-forge-tabs{flex-wrap:nowrap;overflow-x:auto}.theme-forge-panels{min-height:0}.theme-forge-panels>section{padding-inline:2px}.forge-color-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.forge-asset-grid,.forge-share-options{grid-template-columns:1fr}.theme-forge-footer{align-items:stretch;flex-direction:column;gap:8px}.theme-forge-footer [data-forge-save]{width:100%}}

@media(max-width:380px){.forge-color-grid{grid-template-columns:1fr}.forge-floor-select{grid-template-columns:1fr;gap:6px}}

@media(max-width:720px){
  #shortcuts{display:none}
  .mobile-home{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;gap:14px;overflow:auto;overscroll-behavior:contain;padding:12px 12px calc(var(--taskbar-h) + 16px);color:#241824}
  .mobile-home[hidden]{display:none}
  .mobile-home-banner{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;padding:13px;background:linear-gradient(135deg,var(--user-accent2),var(--user-accent));color:#fff;border:2px solid #ffffffa8;border-radius:12px;box-shadow:0 4px 12px #24112742}
  .mobile-home-brand{display:flex;align-items:center;gap:11px;min-width:0}
  .mobile-home-avatar{display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;background:#ffffffdf;color:#342038;border:2px solid #fff;border-radius:50%;font-size:27px}
  .mobile-home-brand>div{min-width:0}
  .mobile-home-eyebrow{margin:0 0 3px;font-size:9px;font-weight:900;letter-spacing:1.4px;opacity:.82}
  .mobile-home-banner h1{margin:0;font-size:clamp(17px,5vw,23px);line-height:1.1;overflow-wrap:anywhere}
  .mobile-home-theme{margin:4px 0 0;font-size:11px;line-height:1.25;opacity:.9}
  .mobile-home-actions{display:flex;align-items:center;gap:5px;flex:0 0 auto}
  .mobile-home-action,.mobile-home-profile{display:grid;place-items:center;flex:0 0 auto;min-width:40px;min-height:42px;padding:5px;border:1px solid #ffffffb0;border-radius:8px;background:#ffffff26;color:inherit;font-size:16px;font-weight:bold}
  .mobile-home-profile{flex:0 0 auto;min-height:42px;padding:6px 9px;border:1px solid #ffffffb0;border-radius:8px;background:#ffffff26;color:inherit;font-size:11px;font-weight:bold}
  .mobile-home-section{display:grid;gap:8px}
  .mobile-floor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .mobile-floor-card{display:flex;align-items:center;gap:8px;min-width:0;min-height:64px;padding:8px;text-align:left;background:#fffF;border:1px solid color-mix(in srgb,var(--user-accent2) 28%,white);border-radius:9px;box-shadow:0 2px 5px #2411271a;color:#241824}
  .mobile-floor-icon{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:8px;background:color-mix(in srgb,var(--user-accent) 12%,white);font-size:23px}
  .mobile-floor-icon .os-icon-image{width:25px;height:25px}
  .mobile-floor-copy{display:grid;gap:3px;min-width:0}
  .mobile-floor-copy strong{font-size:13px;line-height:1.1}
  .mobile-floor-copy small{font-size:9px;line-height:1.2;opacity:.7;overflow-wrap:anywhere}
  .mobile-floor-arrow{margin-left:auto;font-size:21px;color:var(--user-accent2)}
  .mobile-home button:focus-visible{outline:3px solid var(--user-accent);outline-offset:2px;z-index:1}
  body[data-theme-style=pink98] .mobile-home-banner{border-radius:0;box-shadow:4px 4px #0005}
  body[data-theme-style=pink98] .mobile-floor-card{border-radius:0;box-shadow:none}
  body[data-theme-style=y2k] .mobile-home-banner,body[data-theme-style=pinkxp] .mobile-home-banner{border-radius:19px;box-shadow:0 6px 18px color-mix(in srgb,var(--user-accent2) 35%,transparent)}
  body[data-theme-style=y2k] .mobile-floor-card,body[data-theme-style=pinkxp] .mobile-floor-card{border-radius:13px;box-shadow:0 4px 10px color-mix(in srgb,var(--user-accent2) 17%,transparent)}
}

@media(max-width:380px){.mobile-home{padding-inline:8px}.mobile-home-banner{padding:10px;gap:7px}.mobile-home-avatar{flex-basis:40px;width:40px;height:40px;font-size:23px}.mobile-home-profile{font-size:10px;padding-inline:7px}.mobile-floor-grid{gap:6px}.mobile-floor-card{gap:6px;padding:6px}.mobile-floor-copy strong{font-size:12px}.mobile-floor-copy small{font-size:8px}}

/* Pocket desktop: preserve the wallpaper, desktop icons, and taskbar metaphor. */
@media(max-width:720px){
  #shortcuts{display:grid;position:absolute;inset:61px 0 0;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;grid-auto-flow:row;grid-auto-columns:auto;grid-auto-rows:82px;align-content:start;justify-items:center;gap:3px;width:auto;height:auto;padding:7px 8px 8px;overflow:auto;overscroll-behavior:contain}
  #shortcuts.icons-column-arranged,body.compact-icons #shortcuts.icons-column-arranged{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;grid-auto-flow:row;grid-auto-columns:auto;grid-auto-rows:82px;width:auto;height:auto;overflow-x:hidden;overflow-y:auto}
  #shortcuts .desktop-icon{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:min(100%,108px);max-width:108px;min-width:0;height:79px;padding:2px 3px;color:#fff;text-shadow:1px 1px 2px #000,0 0 4px #000;border:1px solid transparent;border-radius:4px;background:transparent;text-align:center}
  #shortcuts .desktop-icon:active,#shortcuts .desktop-icon.selected{border:1px solid #ffffff8c;background:#ffffff26}
  #shortcuts .desktop-icon .glyph{display:grid;place-items:center;flex:0 0 48px;width:100%;line-height:46px;font-size:37px}
  #shortcuts .desktop-icon .glyph .os-icon-image{width:43px;height:43px}
  #shortcuts .desktop-icon .icon-label{max-width:100%;padding:1px 4px;font-size:11px;line-height:1.15;overflow-wrap:anywhere;background:#130c1c38;border-radius:3px}
  body.compact-icons #shortcuts .desktop-icon{width:min(100%,108px);height:79px;font-size:inherit}
  body.compact-icons #shortcuts .desktop-icon .glyph{flex-basis:48px;line-height:46px}
  body.compact-icons #shortcuts .desktop-icon .glyph .os-icon-image{width:43px;height:43px}
  .mobile-home{position:absolute;inset:5px 7px auto;z-index:2;display:block;overflow:visible;padding:0;pointer-events:none}
  .mobile-home[hidden]{display:none}
  .mobile-home-banner{display:flex;align-items:center;justify-content:space-between;min-height:49px;gap:8px;padding:5px 8px;border:2px outset var(--silver);border-radius:5px;background:color-mix(in srgb,var(--silver) 88%,white);color:#211521;box-shadow:2px 2px #0006;pointer-events:auto}
  .mobile-home-brand{display:flex;align-items:center;gap:7px;min-width:0}
  .mobile-home-avatar{flex:0 0 35px;width:35px;height:35px;font-size:21px;border:1px solid #ffffffb8}
  .mobile-home-brand>div{min-width:0}
  .mobile-home-eyebrow{display:none}
  .mobile-home-banner h1{margin:0;font-size:13px;line-height:1.2;color:var(--user-accent2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mobile-home-theme{margin:2px 0 0;font-size:10px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.8}
  .mobile-home-actions{gap:3px}
  .mobile-home-action,.mobile-home-profile{min-width:36px;min-height:36px;padding:3px;border:2px outset #fff;border-radius:3px;background:var(--silver);color:#211521;font-size:16px}
  .mobile-home-action:active,.mobile-home-profile:active{border-style:inset}
  .mobile-home-action-icon{display:grid;place-items:center;line-height:1}
  .mobile-home-action-icon .os-icon-image{width:23px;height:23px}
  .mobile-home-profile{font-size:0}
  .mobile-home-profile:before{content:'👤';font-size:17px}
  .mobile-home button:focus-visible,#shortcuts .desktop-icon:focus-visible{outline:3px dotted var(--user-accent);outline-offset:1px;z-index:1}
  body[data-theme-style=pink98] .mobile-home-banner{border-radius:0;box-shadow:2px 2px #0007}
  body[data-theme-style=y2k] .mobile-home-banner,body[data-theme-style=pinkxp] .mobile-home-banner{border-radius:12px;background:linear-gradient(110deg,#fff0f8,#f1c8df);border:1px solid #fff;box-shadow:0 3px 10px #7652c766}
  body[data-theme-style=y2k] .mobile-home-banner h1,body[data-theme-style=pinkxp] .mobile-home-banner h1{color:#573762}
  body[data-theme-style=y2k] .mobile-home-profile,body[data-theme-style=pinkxp] .mobile-home-profile,body[data-theme-style=y2k] .mobile-home-action,body[data-theme-style=pinkxp] .mobile-home-action{border-radius:9px;background:linear-gradient(#fff8fd,#eab4dc);color:#5b376d}
}

@media(max-width:380px){#shortcuts{grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;padding-inline:5px}#shortcuts .desktop-icon{font-size:10px}.mobile-home-banner{gap:5px;padding-inline:6px}.mobile-home-avatar{flex-basis:31px;width:31px;height:31px;font-size:19px}.mobile-home-actions{gap:2px}.mobile-home-action,.mobile-home-profile{min-width:34px;min-height:36px;padding:2px}.mobile-home-profile{font-size:0}}

@media(max-width:720px){#app-switcher-button{display:none!important}}

/* MorgAmp player layout. */
@media(max-width:720px){.morgamp{padding:10px;gap:10px}.morgamp-online{font-size:0}.morgamp-online i{width:10px;height:10px}.morgamp-display{padding-right:68px}.media-stage{min-height:160px}.media-stage iframe{height:auto;aspect-ratio:16/9;max-height:none}.media-stage[data-provider=spotify]{min-height:340px}.media-stage[data-provider=spotify] iframe{height:320px;max-height:none}.morgamp-add{grid-template-columns:1fr auto}.morgamp-add-copy{grid-column:1/-1}.morgamp-add input:first-of-type{grid-column:1/-1}.morgamp-add input:nth-of-type(2){grid-column:1}.playlist-row{grid-template-columns:minmax(0,1fr) 32px}.playlist-provider{grid-column:1;grid-row:2;margin:0 0 4px 37px;justify-self:start}.playlist-remove{grid-column:2;grid-row:1}.morgamp-library-head span{font-size:8px}}

@media(max-width:430px){.morgamp-header{align-items:flex-start}.morgamp-mark{width:40px;height:40px;font-size:27px}.morgamp-brand h2{font-size:20px}.morgamp-display strong{font-size:12px}.morgamp-add{grid-template-columns:1fr}.morgamp-add-copy,.morgamp-add input:first-of-type,.morgamp-add input:nth-of-type(2),.morgamp-add button{grid-column:1}.morgamp-add button{width:100%}}

/* Welcome collage. */
@media(max-width:720px){.welcome-collage{padding:11px;gap:11px}.welcome-banner{min-height:116px;padding:15px 13px}.welcome-banner:before{width:5px}.welcome-banner-copy{padding-left:5px}.welcome-profile-sticker{min-width:69px;padding:7px 8px}.welcome-profile-sticker>span{font-size:29px}.doodle-sparkle{right:94px}.doodle-heart{right:27%}.welcome-collage-grid{grid-template-columns:minmax(0,1fr)}.welcome-pages{padding:11px}.welcome-clippings{gap:10px}.welcome-sidebar{grid-template-columns:repeat(2,minmax(0,1fr))}.welcome-footer{flex-wrap:wrap}.welcome-footer span:nth-child(2){order:3;width:100%}}

@media(max-width:430px){.welcome-banner{align-items:flex-start;min-height:0;padding:14px 10px}.welcome-banner h1{font-size:23px}.welcome-banner-copy>p:last-child{max-width:220px;font-size:12px}.welcome-profile-sticker{min-width:57px;padding:6px}.welcome-profile-sticker>span{font-size:24px}.welcome-profile-sticker small{font-size:7px}.welcome-clippings{grid-template-columns:minmax(0,1fr)}.welcome-clipping{min-height:0}.welcome-sidebar{grid-template-columns:minmax(0,1fr)}.welcome-social-card{flex-wrap:wrap}.welcome-social-card button{margin-left:33px}.welcome-footer{font-size:9px}}

/* File Finder, PiXtudio, and Desktop Forge. */
@media(max-width:720px){.finder-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.finder-type-tools{grid-column:1/-1}.pixel-studio-layout{grid-template-columns:minmax(0,1fr)}.pixel-studio-window .pixel-studio canvas{width:min(100%,min(62vw,460px))}.pixel-tools{grid-template-columns:minmax(0,1fr)}.pixel-tool-group,.pixel-tools output{grid-column:1/-1}}

@media(max-width:720px){.theme-forge-tabs{grid-template-columns:repeat(5,max-content);overflow-x:auto;justify-content:start}.theme-forge-tabs [role=tab]{min-width:110px}.theme-forge-intro{grid-template-columns:48px minmax(0,1fr)}.theme-forge-intro output{grid-column:1/-1}.theme-forge-footer{align-items:stretch;flex-direction:column}.theme-forge-footer [data-forge-save]{width:100%}}

@media(max-width:720px){.theme-forge-intro{grid-template-columns:minmax(0,1fr) 88px;min-height:110px;padding:12px}.theme-forge-seal{width:78px;height:78px}.theme-forge-seal>span{font-size:28px}.theme-forge-meta>output{text-align:left}}

/* Desktop widgets stay hidden in mobile mode. */
@media (max-width: 720px) {
  .widget-dock { display: none !important; }
}