/* ===============================
   Macintosh 1984 UI - Style
   =============================== */

/* ---- Root + Resets ---- */
:root {
    --mac-bg: #ffffff;
    --mac-fg: #000000;
    --font: "Chicago", "Geneva", "Verdana", sans-serif;
    --menu-height: 28px;
    --titlebar-height: 28px;
    --icon-size: 48px;
    --z-window: 10;
    --z-menu: 1000;
    --z-drag: 2000;
}

@font-face {
    font-family: 'Chicago';
    src: url(data:font/truetype;charset=utf-8;base64,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) format('truetype');
    font-weight: normal;
    font-style: normal;
}


*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    color: var(--mac-fg);
    font-family: var(--font);
    font-size: 12px;
    line-height: 1.2;
    cursor: default;
    user-select: none;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: grayscale;
    image-rendering: pixelated;
    cursor: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2242%22%20height%3D%2242%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0%2C0%20L0%2C30%20L8%2C22%20L14%2C24%20L16%2C22%20L22%2C22%20L0%2C0%20Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M2%2C4%20L2%2C26%20L8%2C20%20L14%2C22%20L2%2C4%20Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E") 0 0, default;
    user-select: none;
}

/* ---- Classic 1-bit dithered desktop ---- */
body {
    background-color: var(--mac-bg);
    background-image:
            linear-gradient(45deg, var(--mac-fg) 25%, transparent 25%),
            linear-gradient(-45deg, var(--mac-fg) 25%, transparent 25%),
            linear-gradient(45deg, transparent 75%, var(--mac-fg) 75%),
            linear-gradient(-45deg, transparent 75%, var(--mac-fg) 75%);
    background-size: 2px 2px;
    background-position: 0 0, 0 1px, 1px -1px, -1px 0px;
    overflow: hidden;
}

input, button, select {
    font-family: inherit;
    font-size: inherit;
}

.hidden {
    display: none !important;
}

/* ---- Menu Bar ---- */
.menubar {
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--menu-height);
    background: var(--mac-bg);
    border-bottom: 2px solid var(--mac-fg);
    display: flex;
    align-items: stretch;
    padding: 0 8px;
    z-index: var(--z-menu);
}

.menu {
    padding: 4px 12px;
    letter-spacing: 0.5px;
}

.menu:hover {
    background-color: var(--mac-fg); /* Changed from 'background' */
    color: var(--mac-bg);
}

/* Add this new rule to protect the logo on hover */
.menu.apple:hover {
    background-color: transparent;
}

.menu.apple {
    width: 36px; /* Give the element a specific width for the icon */
    padding: 0;  /* Remove old padding to help with centering */
    background-image: url('Images/portiis_crown_pixelated_colored.svg');
    background-size: 22px 22px; /* Set a good size for the icon */
    background-repeat: no-repeat;
    background-position: center;
}

.menubar-clock {
    margin-left: auto;
    padding: 4px 12px;
}

/* ---- Dropdowns ---- */
.dropdowns {
    position: absolute;
    z-index: var(--z-menu);
}

.dropdown {
    position: absolute;
    min-width: 180px;
    background: var(--mac-bg);
    border: 2px solid var(--mac-fg);
    box-shadow: 2px 2px 0 var(--mac-fg);
    padding: 4px 0;
}

.dd-item {
    background: none;
    border: none;
    display: block;
    width: 100%;
    text-align: left;
    padding: 4px 20px;
    font-size: 14px;
}

.dd-item:hover {
    background: var(--mac-fg);
    color: var(--mac-bg);
}

.dd-item[disabled] {
    color: #888;
}
.dd-item[disabled]:hover {
    background: none;
    color: #888;
}

.dd-sep {
    height: 1px;
    background-image: linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%),
    linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%);
    background-size: 2px 2px;
    background-position: 0 0, 1px 1px;
    margin: 4px 8px;
    border-top: 1px solid #000;
}


/* ---- Desktop & Icons ---- */
.desktop {
    position: absolute;
    inset: var(--menu-height) 0 0 0;
    overflow: auto;
}
.strip { display: none; } /* Hide old status strip */

.icon {
    position: absolute;
    width: 90px;
    padding: 6px;
}
.icon.system .icon-img {
    width: calc(var(--icon-size) + 6px);
    height: calc(var(--icon-size) + 6px);
}
.icon-img {
    position: relative;
    width: var(--icon-size);
    height: var(--icon-size);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 auto 4px;
}
.icon.owned .icon-img::after {
    content: '';
    position: absolute;
    bottom: 9px;
    right: 3px;
    width: 5px;
    height: 5px;
    background: #000;
}

.icon-name {
    display: block;
    width: 100%;
    border: 1px solid transparent;
    background: transparent;
    color: var(--mac-fg);
    text-align: center;
    padding: 1px 2px;
}

.icon.selected > .icon-img {
    filter: invert(1);
}
.icon.selected > .icon-name {
    background: var(--mac-fg);
    color: var(--mac-bg);
}

input.icon-name:not([readonly]) {
    border: 1px solid var(--mac-fg);
    background: var(--mac-bg);
    outline: none;
}

/* Icon Graphics (by Joey Kisling, recreated as SVG) */
.folder-img { background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M1.5,28.6c-.5,0-.9,0-1.5,0V3.3h1.5v-1.6h10.3v1.6h1.5v1.8h17v1.8H11.9v-3.4H1.5c0,.3,0,.6,0,1,0,7.8,0,15.6,0,23.4,0,.3,0,.5,0,.8h0Z' style='stroke-width:0px;'/%3E%3Cpath d='M1.4,28.6c.2,0,.4,0,.5,0,9.5,0,19,0,28.4,0h0v1.8H1.6c0-.6,0-1.2-.1-1.7,0,0,0,0,0,0Z' style='stroke-width:0px;'/%3E%3Cpath d='M30.4,28.5V7.1h1.6v21.4c-.5,0-1.1,0-1.6,0,0,0,0,0,0,0Z' style='stroke-width:0px;'/%3E%3Cpolygon points='1.5 3.4 1.5 28.6 30.4 28.5 30.4 6.8 11.9 6.8 11.9 3.4 1.5 3.4' style='fill:%23fff; stroke-width:0px;'/%3E%3C/svg%3E");}
.doc-img { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="black" d="M6 2h14l8 8v20H6z"/><path fill="white" d="M7 3h12v8h8v18H7z"/><path fill="black" d="M5 1h1v1H5zm1 0h1v1H6zm1 0h1v1H7zm1 0h1v1H8zm1 0h1v1H9zm1 0h1v1h-1zm1 0h1v1h-1zm1 0h1v1h-1zm1 0h1v1h-1zm1 0h1v1h-1zm1 0h1v1h-1zm1 0h1v1h-1zm1 0h1v1h-1zm1 0h1v1h-1zm1 0h1v1h-1zm1 1h1v1h-1zm0 1h1v1h-1zm0 1h1v1h-1zm1 0h1v1h-1zm-1 1h1v1h-1zm1 0h1v1h-1zm-1 1h1v1h-1zm1 0h1v1h-1zm-1 1h1v1h-1zm1 0h1v1h-1zm-1 1h1v1h-1zm1 1h1v1h-1zm1 0h1v1h-1zm0 1h1v1h-1zm0 1h1v1h-1zm0 1h1v1h-1zm0 1h1v1h-1zm0 1h1v1h-1zm0 1h1v1h-1zm0 1h1v1h-1zm0 1h1v1h-1zm0 1h1v1h-1zm0 1h1v1h-1zm1 1h-1v1h1zm-1 0h-1v1h1zm-1 0h-1v1h1zm-1 0h-1v1h1zm-1 0h-1v1h1zm-1 0h-1v1h1zm-1 0h-1v1h1zm-1 0h-1v1h1zm-1 0h-1v1h1zm-1 0h-1v1h1zm-1 0h-1v1h1zm-1 0h-1v1h1zm-1 0h-1v1h1zm-1 0h-1v1h1zm-1 0h-1v1h1zm-1 0h-1v1h1zm-1 0h-1v1h1zm-1-1h-1v1h1zm0-1h-1v1h1zm0-1h-1v1h1zm0-1h-1v1h1zm0-1h-1v1h1zm0-1h-1v1h1zm0-1h-1v1h1zm0-1h-1v1h1zm0-1h-1v1h1zm0-1h-1v1h1zm0-1h-1v1h1zm0-1h-1v1h1zm0-1h-1v1h1zm0-1h-1v1h1zm0-1h-1v1h1zm0-1h-1v1h1zm0-1h-1v1h1zm0-1h-1v1h1zm0-1h-1v1h1zm0-1h-1v1h1zm0-1h-1v1h1zm-1-1h1v1h-1zm1-1h-1v1h1zm-1-1h-1v1h1zm0-1h-1v1h1z"/></svg>');}
.app-img { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="black" d="M16 3l13 13L16 29 3 16z"/><path fill="white" d="M16 4.4l11.6 11.6L16 27.6 4.4 16z"/><path fill="black" d="M15 2h2v2h-2zm1 2h1v1h-1zm-1 0h-1v1h1zm14 12h2v2h-2zm1-1h1v1h-1zm-1 1v-1h-1v1zm-1 1h-1v1h1zm0-2h-1v1h1zm-27-1h2v2H2zm-1 1h-1v1h1zm1-1v-1h1v1zm1-1h1v1h-1zm0 2h1v1h-1zm13 14h2v2h-2zm-1 1h-1v1h1zm1-1v-1h1v1zM11 11v-1h1v1zm1 0h-1v1h1zm-1 1h-1v1h1zm-1 1v1h-1v-1zm1 1h1v1h-1zm0 1h1v1h-1zm0 1h1v1h-1zm-1 1h-1v1h1zm-1 1h-1v1h1zm1-1v-1h-1v1zm1 1v1h-1v-1zm2 2h1v1h-1zm1 0h1v1h-1zm-3-1h-1v1h1zm-1-1h-1v1h1zm1 1v-1h1v1zm0-1h1v1h-1zm1-1h1v1h-1zm1 1v1h-1v-1zm1 1h-1v1h1zm-1 1v1h-1v-1zm0 1h-1v1h1zm-1 1h-1v1h1zm-1 1h-1v1h1zm1-1v-1h-1v1zm3-13h1v1h-1zm-1 1h-1v1h1zm0 1h-1v1h1zm-1 1v1h-1v-1zm1 1h1v1h-1zm1-1v-1h1v1zm-1-1h-1v1h1zm1-1h1v1h-1zm1 0h1v1h-1zm1 0h1v1h-1zm-2 1v1h-1v-1z"/></svg>');}
.trash-img { background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M28.6,4.6h1.5v2.9h-1.5v21.8h-1.5,0V9H4.4v20.3h0c-.5,0-.9,0-1.4,0V7.5c-.5,0-.9,0-1.4,0v-2.9h1.4,0v1.3h2.9v1.5h20v-1.4h2.8v-1.4h0Z' style='stroke-width:0px;'/%3E%3Cpath d='M3,4.6v-1.6h2.8v-1.4h4.5V0h10.9v1.6h4.7v1.6h0c-1.5,0-3.1,0-4.7,0v1.4h-1.5V1.6h-8.1v2.9h-1.4v-1.4h-4.3v1.4h-2.9,0Z' style='stroke-width:0px;'/%3E%3Cpath d='M25.7,30.7v1.4H5.9v-1.4h0c6.6,0,13.2,0,19.8,0h0Z' style='stroke-width:0px;'/%3E%3Cpath d='M25.8,3.1h2.8v1.5h0c-.9,0-1.9,0-2.8,0v-1.5h0Z' style='stroke-width:0px;'/%3E%3Cpath d='M5.9,30.7h-1.5v-1.5s0,0,0,0h1.5c0,.5,0,1,0,1.5h0Z' style='stroke-width:0px;'/%3E%3Cpath d='M27.1,29.3v1.5h-1.5,0v-1.4h1.5,0Z' style='stroke-width:0px;'/%3E%3Cpath d='M27.2,29.3h-1.5v1.5c-6.6,0-13.2,0-19.8,0,0-.5,0-.9,0-1.5h-1.5V9h22.7v20.3ZM10.6,10.5v17.3h1.4V10.5h-1.4ZM21.1,27.9V10.5h-1.4v17.4h1.4ZM15.2,10.5v17.3h1.4V10.5h-1.4ZM6.1,10.5v17.3h1.4V10.5h-1.4ZM25.5,27.8V10.6h-1.4v17.3h1.4Z' style='fill:%23fff; stroke-width:0px;'/%3E%3Cpath d='M25.8,3.1v1.5h2.8v1.4h-2.8v1.4H5.9v-1.5h-2.9v-1.4h2.9v-1.4h4.3v1.4h1.4V1.6h8.1v2.9h1.5v-1.4h4.7Z' style='fill:%23fff; stroke-width:0px;'/%3E%3Cpath d='M10.6,10.5h1.4v17.3h-1.4V10.5Z' style='stroke-width:0px;'/%3E%3Cpath d='M21.1,27.9h-1.4V10.5h1.4v17.4Z' style='stroke-width:0px;'/%3E%3Cpath d='M15.2,10.5h1.4v17.3h-1.4V10.5Z' style='stroke-width:0px;'/%3E%3Cpath d='M6.1,10.5h1.4v17.3h-1.4V10.5Z' style='stroke-width:0px;'/%3E%3Cpath d='M25.5,27.8h-1.4V10.6h1.4v17.3Z' style='stroke-width:0px;'/%3E%3C/svg%3E");}

.folder-locked-img {
    background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M0,3.3h1.5v-1.7h9.9v1.6h1.5v1.6h17.6c0,.6,0,1.1,0,1.6h1.4v22.2h-1.4v1.6H1.5c0-.5,0-1,0-1.6H0V3.3ZM1.6,28.5h28.8V9.8H1.6v18.7ZM30.4,6.5H11.2v-3.2H1.6v4.7h28.8v-1.6Z' style='stroke-width:0px;'/%3E%3Cpath d='M1.6,28.5V9.8h28.8v18.7H1.6ZM18.6,11.8h-5.7v1.5h-1.5v4.2h-1.4v8h11.5v-8h-1.4v-4.2h-1.5v-1.4Z' style='fill:%23fff; stroke-width:0px;'/%3E%3Cpath d='M30.4,6.5v1.6H1.6V3.4h9.6v3.2h19.1Z' style='fill:%23fff; stroke-width:0px;'/%3E%3Cpath d='M18.6,11.8v1.4h1.5v4.2h1.4v8h-11.5v-8h1.4v-4.2h1.5v-1.5h5.7ZM14.5,15h-1.5v2.5h5.4v-2.6h-1.5v-1.4h-2.4v1.4ZM16.7,23.7v-4.4h-1.7v4.4h1.7Z' style='stroke-width:0px;'/%3E%3Cpath d='M14.5,15v-1.4h2.4v1.4h1.5v2.6h-5.4v-2.5h1.5Z' style='fill:%23fff; stroke-width:0px;'/%3E%3Cpath d='M16.7,23.7h-1.7v-4.4h1.7v4.4Z' style='fill:%23fff; stroke-width:0px;'/%3E%3C/svg%3E");
}

/* System shortcut icons */
.shop-img { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Crect x='4' y='14' width='24' height='16' fill='white' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M2 8 L16 2 L30 8 L30 14 L2 14 Z' fill='white' stroke='black' stroke-width='1.5'/%3E%3Cline x1='2' y1='14' x2='30' y2='14' stroke='black' stroke-width='1.5'/%3E%3Crect x='12' y='20' width='8' height='10' fill='black'/%3E%3Crect x='13' y='21' width='6' height='8' fill='white'/%3E%3Crect x='6' y='17' width='5' height='5' fill='black'/%3E%3Crect x='21' y='17' width='5' height='5' fill='black'/%3E%3Crect x='7' y='18' width='3' height='3' fill='white'/%3E%3Crect x='22' y='18' width='3' height='3' fill='white'/%3E%3Cline x1='8' y1='5' x2='8' y2='14' stroke='black' stroke-width='1'/%3E%3Cline x1='16' y1='2' x2='16' y2='14' stroke='black' stroke-width='1'/%3E%3Cline x1='24' y1='5' x2='24' y2='14' stroke='black' stroke-width='1'/%3E%3C/svg%3E"); }
.about-img { /* inherits mac-icon background via JS */ }
.hat-img { background-image: url("Images/Icons/hatdesigner.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; }
.paint-img { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M8 4 L12 4 L24 24 L20 28 L8 4 Z' fill='white' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M20 28 L24 24 L26 26 Q24 30 20 28 Z' fill='black'/%3E%3Cpath d='M8 4 L12 4 L14 8 L10 8 Z' fill='black'/%3E%3Cline x1='10' y1='8' x2='14' y2='8' stroke='black' stroke-width='1.5'/%3E%3Cline x1='12' y1='12' x2='16' y2='12' stroke='black' stroke-width='0.5'/%3E%3Cline x1='14' y1='16' x2='18' y2='16' stroke='black' stroke-width='0.5'/%3E%3Cline x1='16' y1='20' x2='20' y2='20' stroke='black' stroke-width='0.5'/%3E%3C/svg%3E"); }
.terminal-img { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Crect x='2' y='4' width='28' height='24' rx='2' fill='black' stroke='black' stroke-width='1.5'/%3E%3Crect x='4' y='6' width='24' height='20' fill='white'/%3E%3Cpath d='M7 12 L11 16 L7 20' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='13' y1='20' x2='20' y2='20' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.hat-social-img { background-image: url("Images/Icons/hatsocial.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; }
.fireworks-img { background-image: url("Images/green-pop.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; }
.contest-folder-img {
    position: relative;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M1.5,28.6c-.5,0-.9,0-1.5,0V3.3h1.5v-1.6h10.3v1.6h1.5v1.8h17v1.8H11.9v-3.4H1.5c0,.3,0,.6,0,1,0,7.8,0,15.6,0,23.4,0,.3,0,.5,0,.8h0Z' fill='%23002D62'/%3E%3Cpath d='M1.4,28.6c.2,0,.4,0,.5,0,9.5,0,19,0,28.4,0h0v1.8H1.6c0-.6,0-1.2-.1-1.7,0,0,0,0,0,0Z' fill='%23002D62'/%3E%3Cpath d='M30.4,28.5V7.1h1.6v21.4c-.5,0-1.1,0-1.6,0,0,0,0,0,0,0Z' fill='%23002D62'/%3E%3Cpolygon points='1.5 3.4 1.5 28.6 30.4 28.5 30.4 6.8 11.9 6.8 11.9 3.4 1.5 3.4' fill='%234169E1'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.contest-folder-img::after {
    content: '';
    position: absolute;
    inset: 25% 25% 15% 25%;
    background-image: url("Images/Icons/Hat Designer 2/Hat Front/hat_outline_front_game-01.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

.desktop--fireworks {
    cursor: crosshair;
    animation: fireworks-glow 4s ease-in-out infinite;
}
@keyframes fireworks-glow {
    0%   { box-shadow: inset 0 0 18px 4px #c53f43, inset 0 0 40px 1px #c53f4344; }
    16%  { box-shadow: inset 0 0 22px 5px #e87e22, inset 0 0 45px 2px #e87e2244; }
    33%  { box-shadow: inset 0 0 18px 4px #f5c542, inset 0 0 40px 1px #f5c54244; }
    50%  { box-shadow: inset 0 0 22px 5px #6bb248, inset 0 0 45px 2px #6bb24844; }
    66%  { box-shadow: inset 0 0 18px 4px #00a0c2, inset 0 0 40px 1px #00a0c244; }
    83%  { box-shadow: inset 0 0 22px 5px #8b5fcf, inset 0 0 45px 2px #8b5fcf44; }
    100% { box-shadow: inset 0 0 18px 4px #c53f43, inset 0 0 40px 1px #c53f4344; }
}

.fireworks-bar {
    display: none;
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 900;
    background: var(--mac-bg);
    border: 2px solid var(--mac-fg);
    box-shadow: 2px 2px 0 var(--mac-fg);
    padding: 6px 14px;
    font-family: var(--font);
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}
.fireworks-bar:active {
    background: var(--mac-fg);
    color: var(--mac-bg);
}
.fireworks-bar.active {
    display: block;
}
.fireworks-active .icon-img { filter: invert(1); background-color: #000; }
.firework-particle { position: absolute; pointer-events: none; z-index: 5; transform: translate(-50%, -50%); }

/* ===== Contest Top Banner (scrolling marquee) ===== */
.contest-banner {
    position: fixed;
    top: var(--menu-height);
    left: 0;
    right: 0;
    z-index: 5;
    height: 24px;
    background: #4169E1;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
}
.contest-banner.hidden { display: none; }
.contest-banner-track {
    display: flex;
    gap: 80px;
    white-space: nowrap;
    animation: contestScroll 12s linear infinite;
    height: 100%;
    align-items: center;
}
.contest-banner-track span {
    font-family: var(--font);
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    flex-shrink: 0;
    padding: 0 40px;
}
@keyframes contestScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.competition-bar {
    position: fixed;
    bottom: 22px;
    left: 0;
    right: 0;
    z-index: 901;
    background: #4169E1;
    color: #fff;
    padding: 4px 12px;
    font-family: var(--font);
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    user-select: none;
}
.competition-bar.hidden { display: none; }

.admin-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 900;
    background: var(--mac-fg);
    color: var(--mac-bg);
    padding: 4px 12px;
    font-family: var(--font);
    font-size: 11px;
    text-align: center;
    user-select: none;
}
.admin-bar.hidden { display: none; }

.password-content {
    padding: 20px;
    text-align: center;
}
.password-field {
    background: var(--mac-bg);
    border: 2px inset var(--mac-fg);
    padding: 4px;
    margin: 10px 0;
    width: 100%;
    outline: none;
    font-family: monospace;
}
.password-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}
.password-buttons button {
    width: 80px;
    padding: 2px 0;
    border: 2px solid black;
    background: white;
    cursor: pointer;
}
.password-buttons button:active {
    background: black;
    color: white;
}

.trash.armed {
    background-color: #000;
}
.trash.armed > .icon-img {
    filter: invert(1);
}

/* ---- Windows ---- */
.window {
    position: absolute;
    background: var(--mac-bg);
    border: 2px solid var(--mac-fg);
    box-shadow: 3px 3px 0 var(--mac-fg);
    display: flex;
    flex-direction: column;
    z-index: var(--z-window);
}
/* --- Drag layering --- */
/* icon-layer has no z-index so it doesn't create a stacking context;
   only the dragged icon is lifted above windows */
.icon-layer { position: absolute; inset: var(--menu-height) 0 0 0; min-width: 1280px; min-height: 900px; }

.icon.dragging {
    z-index: var(--z-drag);
    opacity: 0.85;
}

.icon.drag-over {
    outline: 2px solid var(--mac-fg);
    background: rgba(0, 0, 0, 0.12);
}

/* Touch drag cursor overlay */
.touch-cursor {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    width: 28px;
    height: 28px;
    transform: translate(-2px, -2px);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2242%22%20height%3D%2242%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0%2C0%20L0%2C30%20L8%2C22%20L14%2C24%20L16%2C22%20L22%2C22%20L0%2C0%20Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M2%2C4%20L2%2C26%20L8%2C20%20L14%2C22%20L2%2C4%20Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.titlebar {
    height: var(--titlebar-height);
    border-bottom: 2px solid var(--mac-fg);
    cursor: move;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.window-active .titlebar::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    height: 16px;
    background-image: repeating-linear-gradient(to bottom, transparent, transparent 1px, var(--mac-fg) 1px, var(--mac-fg) 2px);
}

.title {
    position: relative;
    background: var(--mac-bg);
    padding: 0 8px;
    z-index: 1;
}

/* Hat design document viewer */
.hat-doc-menubar {
    display: flex;
    border-bottom: 1px solid var(--mac-fg);
    background: var(--mac-bg);
    padding: 0;
    font-size: 12px;
    font-family: inherit;
}
.hat-doc-menu-item {
    position: relative;
    padding: 2px 10px;
    cursor: pointer;
    user-select: none;
}
.hat-doc-menu-item:hover { background: var(--mac-fg); color: var(--mac-bg); }
.hat-doc-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--mac-bg);
    color: var(--mac-fg);
    border: 1px solid var(--mac-fg);
    z-index: 100;
    min-width: 120px;
}
.hat-doc-dropdown.hidden { display: none; }
.hat-doc-dropdown-item {
    padding: 4px 12px;
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
    color: var(--mac-fg);
}
.hat-doc-dropdown-item:hover { background: var(--mac-fg); color: var(--mac-bg); }

/* Zoomable design document viewer */
.hat-doc-zoomable {
    overflow: hidden;
    touch-action: none;
    height: 100%;
    position: relative;
}
.hat-doc-zoomable img {
    max-width: none;
    max-height: none;
    width: 100%;
    height: auto;
    transform-origin: 0 0;
}

.title-buttons {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
}

.btn {
    background: var(--mac-bg); /* Use the standard white background */
    border: none;
    padding: 0;
    position: absolute;
    top: 7px;
    z-index: 1; /* Ensure buttons are layered on top of the titlebar lines */
}

.win-close {
    left: 8px;
    width: 14px;
    height: 14px;
    border: 1px solid var(--mac-fg);
}
.win-close:active { background: var(--mac-fg); }

.win-zoom {
    right: 8px;
    width: 14px;
    height: 14px;
    border: 1px solid var(--mac-fg);
}
.win-zoom::before {
    content:'';
    position: absolute;
    top: 2px; left: 2px;
    width: 8px; height: 8px;
    border: 1px solid var(--mac-fg);
}

.content {
    flex-grow: 1;
    position: relative;
    overflow: auto;
}

.window.max {
    box-shadow: none;
}

.resize-grip {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    cursor: se-resize;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15"><path fill="black" d="M12 0h3v3h-1V1h-2zM0 12h3v3H1v-2H0z"/><path fill="white" d="M13 1h1v1h-1zM1 13h1v1H1z"/></svg>');
}

/* Window Content Styles */
.about { padding: 20px; display: flex; align-items: center; gap: 20px; }
.mac-icon {
    width: 64px;
    height: 64px;
    /* prevent flex from squishing it unexpectedly */
    flex: 0 0 auto;
    background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 351.9 336.5'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23c98c2b;%7D.cls-1,.cls-2,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7,.cls-8,.cls-9,.cls-10,.cls-11,.cls-12,.cls-13,.cls-14%7Bstroke-width:0px;%7D.cls-2%7Bfill:%23cfb12c;%7D.cls-3%7Bfill:%23ca8d2c;%7D.cls-4%7Bfill:%239b4297;%7D.cls-5%7Bfill:%239a4297;%7D.cls-6%7Bfill:%23c43d43;%7D.cls-7%7Bfill:%2300a0c2;%7D.cls-8%7Bfill:%23231f20;%7D.cls-9%7Bfill:%23cfb12d;%7D.cls-10%7Bfill:%236cb24a;%7D.cls-11%7Bfill:%23c53e43;%7D.cls-12%7Bfill:%23cd9131;%7D.cls-13%7Bfill:%23ceb12c;%7D.cls-14%7Bfill:%2382bc63;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-7' d='M152.6,43v11.7c0,1.3-.1,2.5-.2,3.9h-3.6v3.9h4.7-4.9v7.9h-4v3.9h-3.8v3.9h-8v3.9h-31.3v3.7h-21.4c-.6,0-1.2.2-1.8.2-.1,1.2-.3,2.4-.4,3.8h-3.7v4h-4v7.7h-3.8v3.7l-.1.1h-3.9v7.8c-1.3,0-2.6.1-4.1.2v3.7h-3.8v7.9h-3.9v3.8c-1.4,0-2.6.1-3.8.2v3.8c-1.3,0-2.5.1-4,.2v3.9h-3.9v3.9h-3.8v3.9h-8v3.9h-7.7v-4h3.9v-11.8h3.9v-4h3.9v-3.8h11.8v-4h3.8v-3.8c1.4,0,2.6-.1,3.9-.2v-3.7h4v-7.9h3.8c0-1.4.1-2.6.2-3.8h3.9v-3.9h3.9v-7.9h3.7v-3.8h-27.2v7.6h-4.1v-3.7h-11.8v3.9h-7.8v3.8c-1.3,0-2.6.1-3.9.2v3.8h-3.9v3.8c-1.4,0-2.6.1-3.8.2v19.5h3.8c0,1.4.1,2.6.2,4h3.8v3.7c0,2.7,0,5.3-.1,8h-3.7v-3.9h-4v-4h-3.9v-7.8H0v-27.4h3.7v-7.8h3.9c0-1.3.1-2.5.2-3.9h7.6c0-1.4.1-2.6.2-4h19.4v-3.9h8v-7.8h3.8v-11.7c1.4,0,2.6-.1,3.9-.2v-7.6h4v-7.9h3.9v-7.9h4v-3.9h4v-7.7c1.2,0,2.3-.1,3.7-.2v-3.8h4v-4h3.8v-3.8h3.9v-4h7.8v-3.9h7.8c0-1.3.1-2.5.2-3.8h27.2c0,1.1.1,2.3.2,3.7h7.6c0,1.4.1,2.6.2,4h3.8v4h3.8c.1,2.5.3,5,.4,7.7h3.6c0,2.6,0,5.2.1,7.8h-7.8v4h-15.6c0,1.4-.1,2.7-.2,3.9h-3.7v4h-3.9c0,1.5-.1,2.8-.2,4.1h-3.8c0,1.3-.1,2.5-.2,3.8h-3.7v3.9h-3.8v4h7.6c0,1.4.1,2.5.2,3.9h7.7c0,1.4.1,2.6.2,3.8h19.4v-3.9h4v-19.4h11.5v3.8M101.5,27.3v-15.6h-3.7c-.1-1.4-.2-2.6-.3-3.8h-3.8v3.9h-7.8v7.8h-3.8v15.7h3.8c0,1.4.1,2.6.2,3.9h3.8v3.8h4v-3.9h3.9v-11.8h3.7ZM50.8,74.4v3.7h27.3v-7.8h3.8v-7.6h-15.4c0,1.3-.1,2.5-.2,3.9h-7.8v3.8h-3.9v3.9h-3.8v.1ZM105.5,70.4v-3.9h-7.8v-3.8h-4v3.7c-1.4,0-2.6.1-3.9.2v3.8h-3.7v7.6h19.4c0-1.3.1-2.4.2-3.8h3.6v-3.9h-3.8v.1Z'/%3E%3Cpath class='cls-13' d='M262.1,90v-3.8l4-.2v-3.8c2.6,0,5.2,0,7.8-.1h7.7c1.3,0,2.6,0,4,.1v3.7c-1.3,0-2.7.2-4,.2h-11.8v3.7h-3.7v19.6h3.8v4h3.9v3.9h4v3.7h23.2c0-1.3.1-2.5.2-3.9h11.6v-7.8h-3.9v-4h-3.9v-3.8h-3.7c0-1.2-.1-2.4-.2-3.7,1.3-.1,2.5-.3,3.9-.4,0-1.2.1-2.3.2-3.6h3.7c0,1.2.1,2.4.2,3.7h7.7v4h7.8v3.9h7.9v3.9h3.9v-3.6h15.1s.2,0,.3.2v7.5c-1.3,0-2.4.1-3.6.2v7.7h-4v3.9h-3.8v7.8h-4.1v4.1c-1.3-.4-2.6-.4-4,.3v7.4h-3.7v3.8h0c-1.3,0-2.6.1-4,.2v7.8c-1.3,0-2.4.1-3.6.2,0,1.2-.2,2.3-.3,3.5-1.3,0-2.4.1-3.8.2,0,1.2-.1,2.4-.2,3.8-1.2,0-2.4.1-3.9.2v7.7h-3.8v4h-4v3.9h-3.9v3.9h-19.5c0-1.3-.1-2.5-.2-3.9-1.1,0-2.2-.1-3.5-.2,0-1.1-.1-2.2-.2-3.7h-4v-7.9c-1.4,0-2.7.1-3.9.2v-11.9h-3.7v-11.9h-4v-27.4h-3.8v-19.5h3.8v-7.8ZM301.2,133.9v-.8h-3.7v3.6h3.7c-1.2,0-2.4,0-3.6.1h-4.1v3.8h-4v4h-3.8v11.5c-.8.1-1.4.3-2.1.3h-8c-.6,0-1.1,0-1.8.1,0,1.2.1,2.4.2,3.7h-4.2v3.7c1.3,0,2.6.1,3.9.2,0-1.3.1-2.5.2-3.9h4v7.9h3.6v7.7h7.7c0-1.3.2-2.5.3-3.9h7.9v-3.7c1.2,0,2.5-.2,3.7-.2v-3.8h4v-7.8h3.8c0-1.5.1-2.8.2-4h3.7v-11.7c1.5,0,2.7-.1,3.9-.2v-15.3h-7.5c-.1,1.2-.2,2.3-.3,3.5-1.3,0-2.5.1-3.8.2,0,1.3-.1,2.6-.2,3.9-1.2,0-2.4.1-3.5.2-.1,1.3-.2,2.5-.4,3.6,0-.9,0-1.9-.1-2.8l.3.1Z'/%3E%3Cpath class='cls-10' d='M164,43c-3.2,0-6.4,0-9.5-.1h-2v-3.8h-11.5v15.5c-1.3,0-2.7,0-4,.1v3.8h-4v-4h-7.8v-3.8h-7.8v-11.7h3.7v-4c0-1.2.1-2.4.2-3.9h15.6v-4h57.3c.4,0,.8,0,1.4-.1v-3.9h7.7v-3.8h-3.9v-4h-4v-3.9h-3.7v-3.8h7.8v3.7c1.3.2,2.6.4,3.9.6,0,1.1.1,2.2.2,3.4h7.5v4h3.9v3.9h3.9v4h4v3.8c1.3.1,2.5.3,4.1.4v-8.1c1.3,0,2.4-.1,3.6-.2v-3.7c0-2.6,0-5.3.1-7.9h3.9v-3.8h3.7c.2-1.2.4-2.3.7-3.5h18.9c0,1.2.2,2.3.2,3.5h7.9v3.7h3.8c1.3,0,2.6.1,4,.2v3.8h3.9v3.9h3.9v3.8c1.2.2,2.3.4,3.6.6v3.5h-19.2v3.9h-3.9v3.8h-4v4h-3.6c-.1,1.5-.3,2.6-.3,3.8v11.4s.1.2.2.2h0v4h3.8v4.1h3.9c0,1.2,0,2.4.1,3.6v4c1.3,0,2.5.1,3.5.2.2,1.3.3,2.5.4,3.6,1.2,0,2.4.2,3.8.3v3.8h3.9v3.9c-2.6,0-5.2,0-7.8.1,0-1.3-.1-2.6-.2-4.1h-3.9v-3.8h-3.9v-3.9h-3.7v-7.8h-4v19.5c1.4,0,2.6.1,3.8.2,0,1.2,0,2.5.1,3.7,1.4,0,2.7.2,4.1.2h3.6v3.8h-3.9v3.8h-7.8v-3.8h-7.8v-3.8c-1.3,0-2.5-.1-3.7-.2-.1-2.5-.2-5-.4-7.7h-3.7v-7.7h3.7v-4h3.9v-3.6h-3.9v3.6h-4.1v4h-11.5v3.7h-23.5v-3.7h-27.4v-4h-15.7v-3.8h-7.6v-3.9h3.6c0-1.4.1-2.7.2-3.9h3.8v3.9h7.8v4h15.7v3.7h19.4v-3.9h-3.9v-3.8h-7.8v-4h-7.9v-3.9h-7.9v-3.9h-7.7c-.1-1.4-.2-2.6-.3-3.8h.5ZM180,46.9h3.8v4h11.7v3.9h7.9v4h11.5c0,1.3.1,2.5.2,3.7.4.1.6.2.8.2h13.9c.3,0,.6-.2.9-.3v-7.7h-4v-7.8h-3.8v-3.6c-.5-.1-1-.4-1.5-.4h-2.5v-3.7h-11.7v-4h-15.6v-3.7c-.5,0-.9-.1-1.3-.1h-24.9c-.4,0-.8,0-1.2.1h-3.6v3.7h3.6v4.1h7.7v4h4.1v3.7h4v-.1ZM242.7,7.8v23.3h3.7V7.8h-3.7ZM238.7,50.8v3.8h3.7v-3.8h-3.7Z'/%3E%3Cpath class='cls-10' d='M269.9,89.9v-3.7h11.8v3.8h7.9v3.9h11.5c.2-1.4.3-2.7.4-3.9h3.6v-11.7h-7.8v3.9h-2c-3.2,0-6.5,0-9.7.1-1.3,0-2.6,0-4-.1v-4h4v-3.9h3.9v-3.9h3.9v-4h3.8v-23.5h-3.8v-7.9h3.9v3.9h3.9v3.8c1.3,0,2.5.1,3.9.2v3.8h3.9v7.7h3.9v7.9h3.9v23.5h-3.8v3.9h-3.8c0,1.4-.1,2.7-.2,4h-3.7c0,1.3-.1,2.4-.2,3.6-1.4.1-2.6.3-3.9.4-1.2-.1-2.4-.2-3.7-.4,0,1.4-.2,2.6-.2,3.7h-11.5c0-1.3-.1-2.4-.2-3.6h-7.9v-3.9h-3.9v-4h-4l.1.4Z'/%3E%3Cpath class='cls-10' d='M144.6,19.5h-3.6c-.1-2.7-.3-5.2-.4-7.7,0-1.3,0-2.6-.1-3.9h4.2v-3.9h7.9V0h31.3v3.7h8v4.1h-11.9v-3.9h-23.4v3.8h-4.1v3.8h-7.8v7.9l-.1.1Z'/%3E%3Cpath class='cls-14' d='M281.6,27.3h3.6v-3.5c-1.2-.2-2.4-.4-3.6-.6,1.3,0,2.5.1,4,.2v3.8h3.9v3.9h3.9v3.9h-4v-3.9h-7.8v-3.9.1Z'/%3E%3Cpath class='cls-11' d='M211.2,246.4v4.1h11.8v3.8h7.8v4h7.9v3.9h3.9v7.9h3.6c0,1.4.2,2.6.2,4h3.9v11.5h-7.8v-7.8h-3.9v-3.9h-3.8v-3.8h-19.3c-.2,1.3-.3,2.6-.5,3.8h-7.7v3.9h-7.8v4h-7.8v3.9h-7.8v3.9h-3.8v3.9h7.8v3.9h15.7v3.8h27.4v-3.9h7.6c0-1.3.1-2.4.2-3.7h3.8c0,1.1.1,2.3.2,3.6h3.8v11.7h-3.8c0,1.4-.1,2.6-.2,4-1.2,0-2.4.1-3.9.2v3.8h-3.7v3.8h-4v4h-7.8v3.9h-11.7v3.9h-15.7v3.9h-54.8v-3.8h-15.6v-3.9h-11.8v-3.8h-3.9v-4h-7.9v-3.8h15.6v-3.9h19.5v-3.9h4.1v-7.9h7.7v-4h7.7v-3.7c-2.6-.1-5.1-.2-7.6-.4,0-1.2-.1-2.4-.2-3.7h-11.6v-3.9h-4v-7.9h-3.9v-3.8h-3.9v-3.9h-4v-7.8h-3.9v-3.9h-4v-3.9h7.8v-3.9h15.8v-3.9h31.3v-3.6h15.7v3.6h27.4l-.1-.3ZM132.9,258.2h-3.8v7.8h3.9v4h3.9v3.8h3.9v3.9h7.8v3.9h7.8v3.7c.7,0,1.4.2,2.1.2h5.7v3.7h4v-3.6c1.3-.1,2.5-.2,3.7-.4.1-1.2.2-2.4.3-3.8h3.8v-4h4v-3.9h3.9v-3.9h4v-7.8h3.7v-7.9h-7.7v-3.7h-39.2v3.6h-11.7v4.1h0l-.1.3ZM156.4,316.8c-1.2.2-2.5.3-4,.5v7.2s.2.2.3.3h3.8v3.9h11.7v3.8h11.7v-3.9h15.6v-3.9h3.8v-7.7c-1.3,0-2.6-.1-3.9-.2v-3.9h-3.9v-4h-7.8v-3.8h-7.8v-3.8h-11.8v3.8h-3.9v7.9h-3.9v3.7l.1.1Z'/%3E%3Cpath class='cls-6' d='M97.8,262.2h3.8v-4h7.8v3.9c1.3,0,2.6.1,3.9.2v3.7h4v7.9h3.8v7.9h-23.3v3.7c-1.3,0-2.6.1-3.9.2v15.6h3.6v3.6h-7.6c0-1.2-.1-2.4-.2-3.6h-3.7v-7.7c-1.4,0-2.6-.1-4.1-.2v-11.6h3.9v-7.9h3.9v-8h8v-3.7h.1Z'/%3E%3Cpath class='cls-1' d='M324.7,199.3v-15.4h-3.8c0-1.3.4-2.8-.4-4h-3.5v39.2h-3.8v39h7.5v7.6c-1.3.2-2.5.3-3.6.5v7.6h-4v7.8h-4v3.7h-7.8v-3.7h-7.7v7.7h-4v7.8h-3.9v7.9h-3.9v3.9h-3.9v7.9h-3.9v3.9h-7.8v4.1h-8v3.6h-11.7v-3.6h-7.9v-11.7c1.5,0,2.7-.1,3.9-.2,0-1.4.1-2.6.2-4h3.8v-11.7h-3.8c0-1.4-.1-2.5-.2-3.6h-3.8c0,1.2-.1,2.4-.2,3.7h-7.6v-11.7h-4v-3.9h-3.8v-3.9h-4v-3.9h-4c.1-1.2.3-2.5.5-3.8h11.4v3.9h4v3.9h4v3.9h7.7v3.8h7.8v3.9h7.9v-3.9h3.9v-7.9h3.9v-3.9h3.9v-7.9h3.9v-7.7h3.8c0-.5.1-.7.1-1v-17.4c0-.4-.2-.7-.3-1.1h-3.8v-4h-27c-.2,1.4-.3,2.6-.5,3.9h-7.7v4h-7.8v3.8h-3.9v4h-15.7v-7.8h7.8v-4h7.9v-4h11.7v-3.9h15.6v-3.9h19.4v-11.8h-3.8v-19.6h-3.7v-31.3h3.7v11.8h7.9c0,1.4.2,2.5.2,3.7,1.3,0,2.4.1,3.5.2,0,1.4.1,2.6.2,3.9h7.6v19.6h-3.7v27.5h7.8v3.8h3.9v4h3.9v19.4h3.9v-15.4c1.4-.1,2.5-.2,3.7-.3,0-.5.2-1.1.2-1.6v-27.6c0-9.2,0-1.2,0-2h3.8v-46.9c1.5,0,2.7-.1,3.9-.2,0-1.4.1-2.6.2-3.8,1.3,0,2.5-.1,3.8-.2,0-1.2.2-2.3.3-3.5,1.2,0,2.3-.1,3.6-.2v-4h4v-4h3.7v-11.2c1.4-.7,2.7-.7,4-.3v11.4c1.3,0,2.4.1,3.6.2v23.4h-3.7v31.3h-3.8v19.5h-3.9v-23.2c-1.5-.2-2.7-.3-4-.4l.3.3ZM289.4,262.3h-7.7v3.8h-3.9v7.9h-3.9v3.9h-4v7.8h-3.7v3.8h11.7v-3.9h3.9v-3.9h3.9v-4h3.8v-8.1c0-2.5,0-4.9-.1-7.4h3.9v-7.9h-3.9v8ZM258.1,320.8v-11.6h-3.7v11.6h3.7Z'/%3E%3Cpath class='cls-3' d='M328.7,222.9v15.7h-4v-15.3c1.3-.1,2.7-.2,4-.3h0v-.1Z'/%3E%3Cpath class='cls-12' d='M324.7,242.8v11.4h-3.6v-11.4h3.6Z'/%3E%3Cpath class='cls-1' d='M301.3,136.7c0-1.2,0-2.4-.1-3.6,1.3,0,2.6-.1,4-.2,0-1.3.1-2.5.2-3.9,1.3,0,2.4-.1,3.8-.2.1-1.2.2-2.3.3-3.5h7.5v15.3c-1.2,0-2.4.1-3.9.2v7.7h-3.5v-3.7h-4.2v7.8h-3.7v4h3.8v7.8h-7.8c-.1,1.2-.3,2.3-.4,3.5-1.2.1-2.4.3-3.5.4v3.8h-3.9c-.1,1.4-.2,2.6-.3,3.9h-7.7v-7.7c0-1.3.1-2.5.2-4h3.7v-4h-11.5c0,1.3-.1,2.5-.2,3.9h-4.2c0-1.3.1-2.6.2-4h4.2c0-1.2-.1-2.4-.2-3.6h9.7c.6,0,1.3-.2,2.1-.3v-3.7h7.8v-7.9h3.9v-7.9h3.8l-.1-.1Z'/%3E%3Cpath class='cls-2' d='M293.4,89.9h8.1c-.1,1.3-.3,2.5-.4,3.9h-7.7c0-1.3,0-2.6.1-4h0l-.1.1Z'/%3E%3Cpath class='cls-9' d='M285.6,89.9v-4h7.7v4.1h-7.9l.2-.1Z'/%3E%3Cpath class='cls-5' d='M31.2,246.4v-3.7h-7.8c0-1.4-.1-2.6-.2-4h-3.8v-4h-4.1v-7.9h8v-4h7.8v-15.5h3.8c0-1.5.1-2.8.2-4h7.8v3.9h3.7v-3.9h4v-3.9h4v-3.9h3.9v-4h4v-3.7h4v-7.5c1.5-.2,2.6-.4,3.7-.6v-3.7h-7.7v3.7c-1.3,0-2.5.1-4,.2v3.9h-4v4h-7.7c0,1.3-.1,2.5-.2,3.5-1.3.2-2.5.3-3.7.5v3.8h-4.1v3.9h-3.7v3.8h-4v4h-4.1v3.9h-3.7c0,1.4-.1,2.6-.2,3.9h-3.8v7.8h-4v3.9h-3.7v-7.7h-3.9v-43.1h3.8v-27.4h3.8v-7.7c0-2.7,0-5.3.1-8h3.9v-11.8h3.9v-7.8h3.9v-4.1h4v-3.9h3.7c0-1.4.1-2.5.2-3.9h7.9v-3.8h15.7v3.9c0,1.2-.1,2.4-.2,3.8h-3.8v7.9h-4v3.7c-1.4,0-2.6.1-3.9.2v3.8h-3.8v4h-11.8v3.8h-3.9v4h-3.9v11.8h-3.9v27.3h3.9v7.7h19.6v-3.7h7.8v-4h3.9v-3.9h3.8v-3.9h4v-3.8c1.3,0,2.5-.1,3.7-.2,0-.5.3-1,.3-1.4v-6.3h3.8v-7.8h3.8v-15.6h-3.9v-11.6h-3.8v-4h-3.9v-3.9h3.9v-3.9l.1-.1c1.2,0,2.4.1,3.8.2v3.9h4v7.8h3.9v7.8h3.9v7.9h3.8v27.3h-3.9v11.8h-3.9v7.9h-3.9v3.9h-4v7.6c-1.3,0-2.5.1-3.9.2v7.8h-3.9v7.8h-3.8v3.8c1.3,0,2.5.1,3.9.2v3.8h3.9v3.9h7.9v3.8h7.7c0-.5,0-.9.1-1.3,0-.6.2-1.2.2-1.8v-18.3c0-.6,0-1.2.1-1.8h3.3v27.1h-3.7v4.1h-4v3.7h-3.8v-7.8h-4v-3.9h-7.8v-3.8h-7.7c-.2,1.2-.4,2.3-.5,3.6-1.1,0-2.2.2-3.5.3v7.9h4v3.8h3.8v3.9h7.7v4h-11.6v3.7c-1.3,0-2.6.1-4,.2v11.6c1.3,0,2.4.1,3.6.2,0,1.4.2,2.6.2,4h3.8c0,2.5.1,5.1.2,7.8h3.9v3.9h3.9v3.9h3.9v4h3.9v3.8h3.8v3.9h3.9v3.9c1.5,0,2.7.1,4.1.2v11.3h11.4v-3.5h-3.6v-4h7.7v3.9h19.6v-3.9h3.9v-15.6h-4v-7.9h-3.8v-7.9h-4v-3.7c-1.4,0-2.6-.1-3.9-.2v-3.9h-3.8v-3.9h-4v-3.9h-3.9v-4h-3.9v-3.9h-4v-3.9h-3.7v-2.4c.5-.4.9-.8,1.3-1.2h5.8c.2,1.4.4,2.7.6,4.1h3.8v1.9c0,.6.3,1.1.4,1.7h3.6v3.8h3.9v4h3.9v3.9h3.8v3.9h4v3.9h3.9v7.8h4v3.9h3.9v3.8h3.9v7.9h4v7.9h4v15.7h-4.1v3.9h-19.5v3.9H50.5v-7.9h-3.9v-7.8h-3.9v-15.7h-4v-15.8h-3.8v-23.5h-4l.3.1Z'/%3E%3Cpath class='cls-5' d='M62.5,140.7v4h3.7v7.8h-3.7v-4h-3.9v-7.8h-3.9v-3.9h-3.9v-4h-3.9v-3.8c1.3,0,2.5-.1,3.8-.2v-3.8h3.9v-7.9h3.8v15.7h3.4c.3.4.4.7.6,1v6.8l.1.1Z'/%3E%3Cpath class='cls-4' d='M82.1,195.6h-3.7v-11.7h3.7v11.7Z'/%3E%3Crect class='cls-8' x='126.34' y='112.08' width='11.68' height='24.76'/%3E%3Crect class='cls-8' x='207.46' y='112.08' width='11.68' height='24.76'/%3E%3Crect class='cls-8' x='166.58' y='165.53' width='11.77' height='23.57' transform='translate(349.78 4.85) rotate(90)'/%3E%3Crect class='cls-8' x='137.97' y='194.77' width='11.77' height='11.68' transform='translate(344.46 56.76) rotate(90)'/%3E%3Crect class='cls-8' x='195.66' y='194.77' width='11.77' height='11.68' transform='translate(402.16 -.93) rotate(90)'/%3E%3Crect class='cls-8' x='166.81' y='188.94' width='11.77' height='46.02' transform='translate(384.65 39.25) rotate(90)'/%3E%3Crect class='cls-8' x='172.66' y='112.08' width='11.68' height='71.12'/%3E%3C/svg%3E");    background-repeat: no-repeat;
    /* key bits ↓ */
    background-repeat: no-repeat;
    background-position: center;  /* center it */
    background-size: contain;     /* scale to fit without cropping */
}
.about-text { font-size: 13px; }

.doc-wrap { padding: 5px; height: 100%; }
.doc-text { width: 100%; height: 100%; border: none; outline: none; resize: none; font: inherit; }

.image-wrap { display: grid; place-items: center; padding: 10px; height: 100%; }
.image-wrap img { max-width: 100%; max-height: 100%; object-fit: contain; image-rendering: pixelated; }

.folder-grid { padding: 10px; display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start; }
.icon.small { width: 56px; height: 60px; position: relative; padding: 2px; }
.icon.small .icon-img { width: 32px; height: 32px; margin-bottom: 2px; }
.icon.small .small-name {
    font-size: 11px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* ---- Paint App ---- */
.paint {
    display: grid;
    grid-template-columns: 140px 1fr;
    height: 100%;
}
.paint-toolbar {
    border-right: 2px solid var(--mac-fg);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.paint-panel {
    border: 1px solid var(--mac-fg);
}
.paint-panel-title {
    padding: 2px 4px;
    font-weight: bold;
    background: var(--mac-fg);
    color: var(--mac-bg);
}
.paint-panel-content {
    padding: 6px;
}
.paint-panel-content.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}
.color-palette {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}
.color-swatch {
    width: 100%;
    aspect-ratio: 1;
    border: 1px solid var(--mac-fg);
    background: var(--mac-bg);
    padding: 0;
    cursor: pointer;
}
.color-swatch.active {
    outline: 2px solid #00f;
    outline-offset: -3px;
}
.paint-panel-content.actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tool {
    width: 100%; height: 32px;
    border: 1px solid var(--mac-fg);
    background: var(--mac-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    cursor: pointer;
}
.tool svg {
    width: 22px;
    height: 22px;
}
.tool.active { filter: invert(1); }

#brushSize, .field {
    width: 100%;
    border: 1px solid var(--mac-fg);
    background: var(--mac-bg);
    padding: 2px;
    outline: none;
}

#undoBtn, #clearBtn, #saveLocalBtn, #saveCloudBtn {
    border: 1px solid var(--mac-fg);
    background: var(--mac-bg);
    padding: 4px 2px;
    border-radius: 4px;
}
#undoBtn:active, #clearBtn:active, #saveLocalBtn:active, #saveCloudBtn:active {
    filter: invert(1);
}

.paint-stage-wrap {
    overflow: auto;
    background: #888;
    padding: 10px;
}
#paintCanvas {
    background: #fff;
    cursor: crosshair;
}
.save-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px;
    align-items: center;
}

#downloadBtn {
    font-size: 16px;
    padding: 4px;
    height: 30px;
    width: 30px;
}

#downloadBtn:active {
    filter: invert(1);
}
.error-icon-img {
    background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M8,12h1.6v-3.1h1.6v-3.2h1.7v-3.2h1.5V1h3.1v1.6h1.6v3.2h1.6v3.1h1.6v3.2h1.7v3.2h1.6v3.1h1.6v3.1h1.6v3.1h1.6v3.4h1.7v3.1H0v-3.1h1.5v-3.4h1.6v-3h1.6v-3.1h1.6v-3.2h1.6v-3.2ZM3.1,29.4h25.6v-3.3h-1.7v-3.1h-1.6v-3.1h-1.6v-3.2h-1.6v-3.1h-1.5v-3.2h-1.6v-3.1h-1.6v-3.1h-3v3.1h-1.7v3.2h-1.6v3.2h-1.7v3.1h-1.6v3.1c-.6,0-1.1,0-1.6,0v3.1h-1.6v3.1h-1.7v3.2Z' style='stroke-width:0px;'/%3E%3Cpath d='M3.1,29.4v-3.2h1.7v-3.1h1.6v-3.1c.5,0,1,0,1.6,0v-3.1h1.6v-3.1h1.7v-3.2h1.6v-3.2h1.7v-3.1h3v3.1h1.6v3.1h1.6v3.2h1.5v3.1h1.6v3.2h1.6v3.1h1.6v3.1h1.7v3.3H3.1ZM14.5,10.5v11.1h3v-11.1h-3ZM14.5,24.7v3h3v-3h-3Z' style='fill:%23fff; stroke-width:0px;'/%3E%3Cpath d='M14.5,10.5h3v11.1h-3v-11.1Z' style='stroke-width:0px;'/%3E%3Cpath d='M14.5,24.7h3v3h-3v-3Z' style='stroke-width:0px;'/%3E%3C/svg%3E");
}

/* Modify existing alert-content rule */
.alert-content {
    padding: 20px;
    display: flex;
    align-items: flex-start; /* Align icon to the top */
    gap: 15px;
    line-height: 1.4;
}

.alert-text-area {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
    min-height: 50px; /* Ensure space for the button */
}

#errorMessageText {
    margin: 0 0 15px 0;
}

.alert-ok-button {
    width: 80px;
    padding: 2px 0;
    border: 2px solid black;
    background: white;
    align-self: center; /* Center the button horizontally */
    cursor: pointer;
    font-size: 12px;
}

.alert-ok-button:active {
    background: black;
    color: white;
}
.icon.small.selected {
    background-color: #000;
}
.icon.small.selected .icon-img {
    filter: invert(1);
}
.icon.small.selected .small-name {
    color: #fff;
}
/* Icon for a sticky note on the desktop */
.note-img {
    /* The background-image is now set by JavaScript */
}

/* Note content area styling */
.note-textarea {
    width: 100%;
    height: 100%;
    padding: 8px;
    border: none;
    outline: none;
    resize: none;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.4;
}



/* Color label styles for windows */
.window.note-yellow .titlebar,
.window.note-yellow .note-textarea {
    background-color: #fff8b0;
}
.window.note-green .titlebar,
.window.note-green .note-textarea {
    background-color: #d0ffb0;
}
.window.note-blue .titlebar,
.window.note-blue .note-textarea {
    background-color: #b0f0ff;
}
.user-cursor {
    position: absolute;
    width: 42px; /* Same size as our main cursor */
    height: 42px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2242%22%20height%3D%2242%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0%2C0%20L0%2C30%20L8%2C22%20L14%2C24%20L16%2C22%20L22%2C22%20L0%2C0%20Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M2%2C4%20L2%2C26%20L8%2C20%20L14%2C22%20L2%2C4%20Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
    opacity: 0.7;
    z-index: 5; /* Keep cursors below windows */
    pointer-events: none; /* Clicks go "through" the cursor to what's underneath */
    transition: top 0.05s linear, left 0.05s linear; /* Smooths out the movement */
}
.folder-details-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 8px;
    height: 18px; /* Fixed height to match classic Mac */
    font-size: 11px;
    background-color: #fff;
    border-bottom: 2px solid black;
    box-sizing: border-box; /* Include padding/border in height */
}

.folder-details-bar span {
    white-space: nowrap; /* Prevent text from wrapping */
    overflow: hidden;    /* Hide overflow if too long */
    text-overflow: ellipsis; /* Add ellipsis for overflow */
}

.folder-details-bar .item-count {
    flex-grow: 1;
}

.folder-details-bar .folder-size,
.folder-details-bar .available-space {
    margin-left: 15px; /* Spacing between elements */
}

/* ---- Terminal ---- */
#terminalWindow .content { /* Use the ID selector '#' for the window */
    background: #000000;
}

.terminal-content {
    padding: 8px;
    font-family: "Courier New", Courier, monospace;
    color: #ffffff;
    display: flex;
    flex-direction: column;
}

#terminal-output {
    flex-grow: 1;
    overflow-y: auto;
    line-height: 1.5;
}

.terminal-log-line .cmd-name {
    font-weight: bold;
    display: inline-block;
    width: 60px; /* Aligns descriptions */
}

.terminal-input-line {
    display: flex;
    align-items: center;
}

.terminal-prompt {
    margin-right: 8px;
}

#terminal-input {
    flex-grow: 1;
    background: transparent;
    border: none;
    outline: none;
    color: inherit;
    font-family: inherit;
}

#intro {
    position: fixed;
    inset: 0;
    z-index: 99999; /* Ensure it's on top of everything */
    display: grid;
    place-items: center;
}

#opener-window {
    width: min(70vmin, 400px);
    aspect-ratio: 1 / 1;
    background: var(--mac-bg);
    border: 2px solid var(--mac-fg);
    box-shadow: 3px 3px 0 var(--mac-fg);
    padding: 20px;
}

#logo {
    width: 100%;
    height: 100%;
}

.black-hole-dot {
    position: absolute;
    background: black;
    border-radius: 50%;
    transform: scale(0); /* Start invisible and scaled down */
}

.black-hole-dot.is-growing {
    /* This animation will grow the dot, hold it, then shrink it to nothing */
    animation: growAndVanish 1.8s forwards ease-in-out;
}

/* --- Add this to your KEYFRAME ANIMATIONS section --- */
@keyframes screen-shake-subtle {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-1px, 2px); }
    50% { transform: translate(2px, -1px); }
    75% { transform: translate(-1px, -2px); }
}

@keyframes growAndVanish {
    0% { transform: scale(0.01); opacity: 1; }
    40% { transform: scale(1); opacity: 1; }
    80% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0); opacity: 0; }
}


/* --- Black Hole Effects --- */
.distortion-field {
    position: fixed; /* Changed from absolute */
    width: 400px;
    height: 400px;
    mask-image: radial-gradient(circle, black 40%, transparent 80%);
    -webkit-mask-image: radial-gradient(circle, black 40%, transparent 80%);
    backdrop-filter: url(#vortex);
    transform: scale(0);
    opacity: 0;
    z-index: 10000;
}

.distortion-field.is-rippling {
    animation: blackHoleLifeCycle 1.6s forwards ease-in-out;
}

.icon.is-shaking {
    animation: shake-violent 0.1s infinite;
}

.icon.is-collapsing {
    animation: collapseToBlackHole 0.4s forwards ease-in;
}

.black-hole-dot {
    position: fixed; /* Changed from absolute */
    background: black;
    border-radius: 50%;
    transform: scale(0);
    z-index: 10001;
}

.black-hole-dot.is-growing {
    animation: blackHoleLifeCycle 1.8s forwards ease-in-out;
}

/* --- KEYFRAME ANIMATIONS --- */
@keyframes shake-violent {
    0% { transform: translate(3px, 2px); }
    25% { transform: translate(-4px, 1px); }
    50% { transform: translate(-2px, -4px); }
    75% { transform: translate(4px, -2px); }
    100% { transform: translate(3px, 2px); }
}

@keyframes collapseToBlackHole {
    0% { transform: scale(1); border-radius: 0; }
    50% { transform: scale(1.2); opacity: 0.5; }
    100% { transform: scale(0); border-radius: 50%; background-color: black; opacity: 1; }
}

@keyframes blackHoleLifeCycle {
    0%   { transform: scale(0.01) rotate(0deg); opacity: 1; }
    50%  { transform: scale(1) rotate(180deg); opacity: 0.7; }
    85%  { transform: scale(1) rotate(270deg); opacity: 0.7; }
    100% { transform: scale(0) rotate(360deg); opacity: 0; }
}

/* --- Minimap navigator --- */
.minimap-toggle {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 900;
    width: 36px;
    height: 36px;
    background: var(--mac-bg);
    border: 2px solid var(--mac-fg);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 2px 2px 0 var(--mac-fg);
    cursor: pointer;
}
.minimap-toggle:active { background: var(--mac-fg); }
.minimap-toggle:active svg * { stroke: var(--mac-bg); }
.minimap-toggle.hidden { display: none; }

.minimap-panel {
    position: fixed;
    bottom: 62px;
    right: 16px;
    z-index: 900;
    width: 180px;
    height: 120px;
    background: var(--mac-bg);
    border: 2px solid var(--mac-fg);
    box-shadow: 3px 3px 0 var(--mac-fg);
    overflow: hidden;
}
.minimap-panel.hidden { display: none; }

#minimapCanvas { display: block; width: 100%; height: 100%; }

.minimap-viewport {
    position: absolute;
    border: 2px solid var(--mac-fg);
    background: rgba(0, 0, 0, 0.08);
    cursor: grab;
}
.minimap-viewport:active { cursor: grabbing; }

@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {
    /* --- Larger icons on mobile --- */
    .icon { width: 80px; }
    .icon-img { width: 56px; height: 56px; }
    .icon-name { font-size: 11px; }

    /* --- Larger touch targets for window buttons --- */
    .win-close, .win-zoom { width: 18px; height: 18px; }
    .win-zoom::before { width: 10px; height: 10px; }

    /* --- Hide resize grip (windows are maximized) --- */
    .resize-grip { display: none; }

    /* --- Pannable desktop canvas (touch smoothing) --- */
    .desktop {
        -webkit-overflow-scrolling: touch;
    }

    /* --- Larger minimap touch targets on mobile --- */
    .minimap-toggle { width: 44px; height: 44px; }

    /* --- Paint App Mobile Layout --- */
    .paint {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto;
    }

    .paint-toolbar {
        flex-direction: column;
        overflow-y: auto;
        overflow-x: hidden;
        border-right: none;
        border-top: 2px solid var(--mac-fg);
        white-space: normal;
        max-height: 45vh;
        padding: 6px;
        gap: 6px;
    }

    .paint-panel {
        display: block;
        min-width: unset;
        width: 100%;
    }

    .color-palette {
        grid-template-columns: repeat(6, 1fr);
        gap: 6px;
    }

    .color-swatch {
        min-width: 28px;
        min-height: 28px;
    }

    .paint-panel-content.grid-2 {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .tool {
        height: 44px;
    }

    .tool svg {
        width: 28px;
        height: 28px;
    }

    #paintCanvas {
        width: 100%;
        height: auto;
    }

    /* --- Trash: styled as button, inline with minimap toggle --- */
    #trash {
        position: fixed;
        bottom: 16px;
        left: 16px;
        top: auto;
        right: auto;
        width: 44px;
        height: 44px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--mac-bg);
        border: 2px solid var(--mac-fg);
        border-radius: 4px;
        box-shadow: 2px 2px 0 var(--mac-fg);
        z-index: 900;
    }

    #trash .icon-img {
        width: 28px;
        height: 28px;
        margin: 0;
    }

    #trash .icon-name {
        display: none;
    }

    /* --- Scroll lock when fullscreen app is open on mobile --- */
    .desktop.mobile-locked {
        overflow: hidden !important;
        touch-action: none;
    }

    .desktop.mobile-locked #trash,
    .desktop.mobile-locked .minimap-toggle,
    .desktop.mobile-locked .minimap-panel {
        display: none !important;
    }
}

/* --- Landscape phone adjustments --- */
@media (max-height: 500px) and (orientation: landscape) {
    .minimap-panel {
        bottom: 54px;
        width: 160px;
        height: 90px;
    }

    .minimap-toggle {
        bottom: 8px;
        right: 8px;
        width: 38px;
        height: 38px;
    }

    #trash {
        bottom: 8px;
        left: 8px;
        width: 38px;
        height: 38px;
    }
}

/* ---- Desktop Pet ---- */
#desktopPet {
    position: fixed;
    width: 24px;
    height: 24px;
    z-index: 9000;
    pointer-events: auto;
    image-rendering: pixelated;
    cursor: grab;
    transition: none;
}
#desktopPet.hidden { display: none; }
#desktopPet.held { cursor: grabbing; }
#desktopPet.flipped { transform: scaleX(-1); }
#desktopPet .pet-zzz {
    position: absolute;
    top: -12px;
    right: -8px;
    font-family: var(--font);
    font-size: 9px;
    color: var(--mac-fg);
    pointer-events: none;
    animation: pet-zzz 2s ease-in-out infinite;
}
@keyframes pet-zzz {
    0%, 100% { opacity: 0; transform: translateY(0) scale(0.8); }
    50% { opacity: 1; transform: translateY(-6px) scale(1); }
}

/* ---- Hat Collection ---- */
.hatbook-img { background-image: url("Images/Icons/hatbook.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; }

.hat-coll-menubar {
    display: flex; align-items: center; gap: 0;
    border-bottom: 1px solid var(--mac-fg);
    background: var(--mac-bg);
    padding: 0 30px;
    height: var(--titlebar-height);
    font-family: var(--font); font-size: 11px;
    flex-shrink: 0;
}
.hat-coll-mode-btn {
    background: var(--mac-bg); border: 1px solid var(--mac-fg);
    font-family: var(--font); font-size: 11px;
    padding: 2px 10px; cursor: pointer;
    margin-right: -1px;
}
.hat-coll-mode-btn.active {
    background: var(--mac-fg); color: var(--mac-bg);
}
.hat-coll-filter {
    margin-left: auto;
    background: var(--mac-bg); border: 1px solid var(--mac-fg);
    font-family: var(--font); font-size: 11px;
    padding: 2px 10px; cursor: pointer;
}
.hat-coll-filter.active {
    background: var(--mac-fg); color: var(--mac-bg);
}
.hat-coll-count {
    margin-left: 8px;
    font-family: var(--font); font-size: 10px;
    color: var(--mac-fg); opacity: 0.6;
}

/* List view */
.hat-coll-list {
    overflow-y: auto; height: 100%;
}
.hat-coll-header {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--mac-fg);
    font-family: var(--font); font-size: 10px;
    font-weight: bold; background: var(--mac-bg);
    position: sticky; top: 0; z-index: 1;
}
.hat-coll-row {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 8px;
    border-bottom: 1px solid rgba(0,0,0,0.15);
    font-family: var(--font); font-size: 11px;
    cursor: default;
}
.hat-coll-row:hover { background: rgba(0,0,0,0.04); }
.hat-coll-open-btn {
    background: var(--mac-bg); border: 1px solid var(--mac-fg);
    font-family: var(--font); font-size: 10px;
    padding: 2px 8px; cursor: pointer;
    flex-shrink: 0;
}
.hat-coll-open-btn:active { background: var(--mac-fg); color: var(--mac-bg); }
.hat-coll-thumb {
    width: 36px; height: 36px; flex-shrink: 0;
    background-size: contain; background-repeat: no-repeat; background-position: center;
    image-rendering: pixelated;
    border: 1px solid var(--mac-fg);
    background-color: #fff;
}
.hat-coll-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hat-coll-designer { flex: 0 0 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.7; }
.hat-coll-swatches { display: flex; gap: 2px; flex-shrink: 0; }
.hat-coll-swatch {
    width: 10px; height: 10px; border-radius: 50%;
    border: 1px solid var(--mac-fg);
}
.hat-coll-sig {
    width: 48px; height: 14px; flex-shrink: 0;
    image-rendering: pixelated;
    border: 1px solid rgba(0,0,0,0.2);
    background-color: #fff;
    background-size: contain; background-repeat: no-repeat; background-position: center;
}

/* Book view */
.hat-coll-book {
    position: relative;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    height: 100%; padding: 8px;
    background: var(--mac-bg);
}
.hat-coll-page {
    flex: 1; width: 100%;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.hat-coll-page img {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
    image-rendering: auto;
    border: 1px solid var(--mac-fg);
}
.hat-coll-arrow-fixed {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    z-index: 10;
    padding: 4px;
}
.hat-coll-arrow-fixed:hover { color: #000; }
.hat-coll-arrow-fixed:disabled { opacity: 0.2; cursor: default; }
.hat-coll-arrow-left { left: 8px; }
.hat-coll-arrow-right { right: 8px; }
.hat-coll-page-nav {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 6px 0 2px;
    font-family: var(--font); font-size: 11px;
}
.hat-coll-empty {
    display: flex; align-items: center; justify-content: center;
    height: 100%;
    font-family: var(--font); font-size: 12px;
    opacity: 0.5;
}

/* ===== Competition Popup Overlay ===== */
.comp-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.comp-overlay.hidden { display: none; }
.comp-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
}
.comp-scene {
    position: relative;
    width: 420px;
    max-width: 90vw;
    height: 480px;
    max-height: 85vh;
    background: var(--mac-bg);
    border: 3px solid var(--mac-fg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}
.comp-close-btn {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 10;
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: var(--mac-fg);
    font-family: var(--font);
    line-height: 1;
}
.comp-close-btn:hover { opacity: 0.6; }

/* Rising elements */
.comp-rise {
    position: absolute;
    width: 100%;
    transform: translateY(120%);
}
.comp-rise.comp-animate {
    animation: compRise 2s ease-out forwards;
}
.comp-rise-pops {
    bottom: 0;
    height: 60%;
    z-index: 1;
}
.comp-rise-pops.comp-animate {
    animation-duration: 2.5s;
}
.comp-pop-img {
    position: absolute;
    bottom: 0;
    width: 50px;
    height: auto;
    image-rendering: pixelated;
    animation: compFloat 3s ease-in-out infinite alternate;
}
.comp-pop-img:nth-child(odd) { animation-delay: 0.5s; }
.comp-pop-img:nth-child(2) { bottom: 20px; width: 40px; }
.comp-pop-img:nth-child(3) { bottom: 40px; width: 55px; }
.comp-pop-img:nth-child(4) { bottom: 10px; width: 45px; }
.comp-pop-img:nth-child(5) { bottom: 30px; width: 60px; }
.comp-pop-img:nth-child(6) { bottom: 50px; width: 38px; }
.comp-pop-img:nth-child(7) { bottom: 15px; width: 48px; }
.comp-pop-img:nth-child(8) { bottom: 35px; width: 42px; }

@keyframes compFloat {
    from { transform: translateY(0); }
    to   { transform: translateY(-12px); }
}

.comp-rise-logo {
    bottom: 35%;
    z-index: 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
}
.comp-rise-logo.comp-animate {
    animation-duration: 2s;
    animation-delay: 0.4s;
}
.comp-logo-img {
    width: 180px;
    height: auto;
    image-rendering: pixelated;
    margin-bottom: 16px;
}
.comp-title {
    font-family: var(--font);
    font-size: 18px;
    font-weight: bold;
    color: var(--mac-fg);
    margin-bottom: 6px;
}
.comp-subtitle {
    font-family: var(--font);
    font-size: 12px;
    color: var(--mac-fg);
    opacity: 0.7;
}

.comp-rise-btn {
    bottom: 8%;
    z-index: 3;
    text-align: center;
}
.comp-rise-btn.comp-animate {
    animation-duration: 1.8s;
    animation-delay: 0.8s;
}
.comp-design-btn {
    font-family: var(--font);
    font-size: 16px;
    font-weight: bold;
    padding: 10px 40px;
    background: #4169E1;
    color: #fff;
    border: 2px solid #4169E1;
    cursor: pointer;
}
.comp-design-btn:hover {
    background: #2a4fbf;
    color: #fff;
}

@keyframes compRise {
    from { transform: translateY(120%); }
    to   { transform: translateY(0); }
}

/* ===== Competition Submission Form (inside hat designer) ===== */
.comp-submit-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: rgba(0,0,0,0.3);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 8%;
}
.comp-submit-form {
    background: var(--mac-bg);
    border: 2px solid var(--mac-fg);
    min-width: 280px;
    max-width: 90%;
}
.comp-submit-header {
    padding: 3px 8px;
    font-weight: bold;
    font-size: 11px;
    background: var(--mac-fg);
    color: var(--mac-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.comp-submit-header button {
    background: none;
    border: none;
    color: var(--mac-bg);
    font-size: 14px;
    cursor: pointer;
    font-family: var(--font);
}
.comp-submit-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: var(--font);
    font-size: 11px;
}
.comp-submit-body label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 11px;
    font-weight: bold;
}
.comp-submit-body input,
.comp-submit-body select {
    font-family: var(--font);
    font-size: 11px;
    padding: 4px 6px;
    border: 1px solid var(--mac-fg);
    background: var(--mac-bg);
}
.comp-submit-body .os-button {
    margin-top: 4px;
}

/* ===== Competition Tab in Collection Book (admin) ===== */
.comp-list {
    flex: 1;
    overflow-y: auto;
    font-family: var(--font);
    font-size: 11px;
}
.comp-list-header {
    display: flex;
    gap: 4px;
    padding: 4px 8px;
    font-weight: bold;
    border-bottom: 2px solid var(--mac-fg);
    background: var(--mac-bg);
    position: sticky;
    top: 0;
    z-index: 1;
}
.comp-list-row {
    display: flex;
    gap: 4px;
    padding: 4px 8px;
    border-bottom: 1px solid #ccc;
    align-items: center;
    cursor: default;
}
.comp-list-row:hover { background: rgba(0,0,0,0.04); }
.comp-list-thumb {
    flex: 0 0 36px;
    height: 36px;
    border: 1px solid #ccc;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}