/* The Music and Games folders on the Mac's desktop. */
.record-icon{position:relative;display:block;width:50px;height:50px;border-radius:50%;background:radial-gradient(circle,#d9a65e 0 7px,#2c2a26 8px 9px,#1d1c1a 10px 13px,#2c2a26 14px 15px,#1d1c1a 16px 19px,#33302b 20px);box-shadow:1px 4px 6px #1d3e3633}
.record-icon:after{content:'';position:absolute;inset:23px;border-radius:50%;background:#f3ead2}
.games-icon{position:relative;display:block;width:60px;height:36px;margin-top:8px;border-radius:18px;background:#c98f6c;box-shadow:inset 0 -4px 0 #9b694b66,1px 4px 6px #1d3e3633;border:1px solid #7d5a4366}
.games-icon:before{content:'';position:absolute;left:11px;top:14px;width:14px;height:4px;background:#f6ecd6;border-radius:1px;box-shadow:5px -5px 0 -1px transparent}
.games-icon:after{content:'';position:absolute;left:16px;top:9px;width:4px;height:14px;background:#f6ecd6;border-radius:1px}
.games-icon i{position:absolute;right:11px;top:10px;width:7px;height:7px;border-radius:50%;background:#f6ecd6;box-shadow:-8px 7px 0 #f6ecd6}
.desktop-folders button:hover .record-icon{animation:recordSpin 1.6s linear infinite}
.desktop-folders button:hover .games-icon{translate:0 -4px}
@keyframes recordSpin{to{rotate:360deg}}

/* Music: a short playlist with covers, each song opening on YouTube. */
.music-head{display:flex;align-items:center;gap:22px;margin-bottom:8px}
.app-content .music-head h2{margin:6px 0 0}
.music-record{flex:none;width:78px;height:78px;border-radius:50%;background:radial-gradient(circle,#f3ead2 0 4px,#d9a65e 5px 15px,#2c2a26 16px 17px,#1d1c1a 18px 24px,#2c2a26 25px 26px,#1d1c1a 27px 32px,#33302b 33px);box-shadow:0 6px 14px #1d2a2233}
.app-content:has(.song-list a:hover,.song-list a:focus-visible) .music-record{animation:recordSpin 2.4s linear infinite}
.song-list{list-style:none;margin:22px 0 0;padding:0;max-width:640px}
.song-list li{border-bottom:1px solid #ddd4c4}
.song-list li:before{content:none}
.song-list a{display:flex;align-items:center;gap:14px;padding:10px 4px;color:inherit;text-decoration:none;border-radius:6px}
.song-list a:before{content:'–';flex:none;color:#9a8d74;font:18px Georgia,serif}
.song-art{flex:none;width:56px;height:56px;border-radius:3px;object-fit:cover;background:#e3dccb;box-shadow:0 0 0 1px #1d2a2222,0 3px 8px #1d2a2226}
.song-text{display:grid;gap:2px;min-width:0;flex:1}
.song-title{font:19px/1.25 Georgia,serif;color:#294f3b}
.song-artist{font-size:13px;color:#6b6f63}
.song-artist i{color:#8a8b7c}
.song-go{flex:none;font-size:12px;color:#a29478;opacity:0;transition:opacity .15s}
.song-list a:hover,.song-list a:focus-visible{background:#ece7d9}
.song-list a:hover .song-go,.song-list a:focus-visible .song-go{opacity:1}
.song-list a:hover .song-title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.app-content .song-outro{margin-top:22px;font-style:italic;color:#7a7766}
@media(max-width:700px){.music-head{gap:14px}.music-record{width:54px;height:54px;background:radial-gradient(circle,#f3ead2 0 3px,#d9a65e 4px 10px,#2c2a26 11px 12px,#1d1c1a 13px 17px,#2c2a26 18px,#1d1c1a 19px 22px,#33302b 23px)}.song-list a{gap:10px;padding:8px 0}.song-art{width:46px;height:46px}.song-title{font-size:17px}.song-go{display:none}}

/* Games: the list of games, then each game in its own window. */
.game-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:26px}
.game-card{display:grid;grid-template-rows:auto auto 1fr;gap:6px;text-align:left;padding:14px 16px 16px;border:1px solid #cfd6c4;border-radius:10px;background:#fbf8ef;color:inherit;cursor:pointer;transition:translate .15s,box-shadow .15s}
.game-card img{width:100%;height:110px;object-fit:contain;object-position:center bottom;margin-bottom:6px}
.game-card:hover,.game-card:focus-visible{translate:0 -3px;box-shadow:0 8px 20px #1d2a221f}
.game-card-title{font:20px/1.2 Georgia,serif;color:#294f3b}
.game-card-blurb{font-size:13px;line-height:1.5;color:#5f6559}
@media(max-width:700px){.game-list{grid-template-columns:1fr 1fr;gap:10px}.game-card{padding:10px}.game-card img{height:70px}.game-card-title{font-size:16px}.game-card-blurb{font-size:12px}}

.game-stage{flex:1;min-height:0;display:flex;flex-direction:column;background:#26322b;padding:12px;gap:10px}
.game-frame{flex:1;min-height:0;container-type:size;display:grid;place-items:center}
.game-box{position:relative;width:min(100cqw,100cqh * 16 / 9);aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#141b17;box-shadow:0 10px 30px #0006}
.game-canvas{display:block;width:100%;height:100%;outline:none;touch-action:none;cursor:pointer}
.game-canvas:focus-visible{box-shadow:inset 0 0 0 2px #e3c27a}
.game-hud{position:absolute;inset:8px 12px auto;display:flex;justify-content:space-between;pointer-events:none;font:700 15px/1 ui-sans-serif,system-ui;color:#fff6df;text-shadow:0 1px 3px #000a}
.game-best{font-weight:500;opacity:.85}
.game-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:16px 8%;text-align:center;background:#141b17cc;backdrop-filter:blur(2px)}
.game-overlay[hidden]{display:none}
.app-content .game-title{margin:0;font:clamp(18px,4cqw,30px)/1.15 Georgia,serif;color:#fff6df;max-width:none}
.app-content .game-how{margin:4px 0 12px;font:clamp(12px,1.9cqw,15px)/1.5 ui-sans-serif,system-ui;color:#dfe5d6;max-width:46ch}
.game-play{border:0;border-radius:999px;padding:10px 26px;background:#e3c27a;color:#2b2416;font-weight:700;font-size:15px;cursor:pointer}
.game-play:hover{background:#efd193}
.game-pad{flex:none;display:flex;justify-content:space-between;align-items:center;gap:12px;user-select:none;-webkit-user-select:none}
.game-pad[hidden]{display:none}
.game-pad-moves{display:flex;gap:8px}
.game-pad button{min-width:54px;height:50px;border:0;border-radius:12px;background:#3f4d44;color:#f3ecd8;font-size:22px;touch-action:none}
.game-pad .game-pad-action{min-width:96px;background:#c98f6c;font-size:16px;font-weight:700}
.game-pad button.is-down{filter:brightness(1.3);scale:.96}
/* Sideways phones: the game wants every pixel of height. */
@media(max-width:500px){.game-pad-moves{gap:6px}.game-pad button{min-width:46px;height:48px}.game-pad .game-pad-action{min-width:84px}}
/* Sideways phones: the game wants every pixel of height, with the arrows under
   the left thumb and the action button under the right. */
@media(max-height:500px){#panel-dialog:has(.game-view) .panel-nav{display:none}.game-view .browser-toolbar{padding:4px 56px 4px 8px}.game-view .browser-toolbar button{padding:5px 9px}.game-stage{padding:6px;flex-direction:row;align-items:stretch}.game-pad{display:contents}.game-pad>*{align-self:center}.game-pad-moves{order:-1;flex:none;flex-wrap:wrap;justify-content:center;width:104px;gap:6px}.game-pad button{min-width:48px;height:44px}.game-pad .game-pad-action{flex:none;min-width:84px;height:64px}}

/* Desktop labels sit on a soft tag so they read on sky and mountain alike. */
.folder-name{padding:2px 8px;border-radius:9px;background:#f7f2e2c4;color:#233c2d;text-shadow:none}
.evening .folder-name{background:#1d2b30b8;color:#f3e8cd}
.app-content .game-rotate{display:none;max-width:none;margin:0;text-align:center;font:13px/1.4 ui-sans-serif,system-ui;color:#c9d2bf}
@media(pointer:coarse) and (orientation:portrait){.app-content .game-rotate{display:block}}
@media(max-height:500px){#panel-dialog:has(.game-view) .dialog-close{top:3px;right:8px;width:32px;height:32px;padding:0;font-size:18px}}