IOS/styles.css

* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { display: none; }
/*hides all scrollbars on the entire page. couldn't fine tune this to make them thinner or less huge looking, and scrollbar colors cannot be changed which forced me to do it this way. sorry*/

.iphone-wrap {
  text-align: center;
  font-family: -apple-system, 'Helvetica Neue', sans-serif;
  padding: 20px 0 40px;
}
.iphone-frame {
  display: inline-block;
  width: 320px;
  box-sizing: border-box;
  background: #1a1a1a;
  /*bezel controller. if changing this, remember to adjust padding. padding is the amount of black bezel, radius controls the corners. but hey, please don't change this, i worked hard to get this just right. change it only if you make ur own spinoff pls or really know what you're doing, thx*/
  border-radius: 38px;
  padding: 8px;
  box-shadow: 0 0 0 2px silver, 0 0 0 4px #111, 0 20px 60px rgba(0,0,0,0.5);
  position: relative;
  vertical-align: top;
}
.iphone-frame::before {
  content: '';
  position: absolute;
  left: -5px; top: 80px;
  width: 4px; height: 32px;
  background: #2a2a2a;
  border-radius: 2px 0 0 2px;
  box-shadow: 0 40px 0 #2a2a2a, 0 80px 0 #2a2a2a;
}
.iphone-frame::after {
  content: '';
  position: absolute;
  right: -5px; top: 100px;
  width: 4px; height: 60px;
  background: #2a2a2a;
  border-radius: 0 2px 2px 0;
}
.iphone-screen {
  background: #000;
  border-radius: 30px;
  overflow: hidden;
  position: relative;
  height: 580px;
  width: 100%;
  box-sizing: border-box;
}
.dynamic-island {
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  width: 110px; height: 32px;
  background: #000;
  border-radius: 20px;
  z-index: 200;
  pointer-events: none;
}
.status-bar {
  position: absolute;
  top: 10; left: 0; right: 0; height: 25px;
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 0 30px 6px;
  z-index: 150;
  font-size: 11px; font-weight: 600; color: #fff;
  pointer-events: none;
}
.status-time { font-size: 14px; font-weight: 700; }
.app-screen {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.scroll-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.app-grid {
  position: absolute;
  top: 60px; left: 0; right: 0;
  padding: 10px 16px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px 10px;
  box-sizing: border-box;
  width: 100%;
  z-index: 1;
}
.app-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  min-width: 0;
}
.app-icon-img {
  width: 56px; height: 56px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  overflow: hidden;
  flex-shrink: 0;
}
.app-icon-img a { text-decoration: none; }
.app-icon-img a::after { display: none !important; }
.app-icon-label {
  font-size: 9px; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  text-align: center; line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  max-width: 56px;
}

.dock {
  position: absolute;
  bottom: 15px; left: 12px; right: 12px;
  background: rgba(255,255,255,0.32);
  border-radius: 20px;
  padding: 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 1;
}
.dock-icon {
  width: 52px; height: 52px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

.screen-camera { background: #000; display: flex; flex-direction: column; }
.camera-viewfinder {
  flex: 1;
  background: #111;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  position: relative;
  min-height: 0;
  overflow: hidden;
}
.cam-grid-h {
  position: absolute;
  height: 1px; left: 0; right: 0;
  background: rgba(255,255,255,0.15);
}
.cam-grid-v {
  position: absolute;
  width: 1px; top: 0; bottom: 0;
  background: rgba(255,255,255,0.15);
}
.camera-controls {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px; background: #000; flex-shrink: 0;
}
.shutter-btn {
  width: 64px; height: 64px; border-radius: 50%;
  background: #fff; border: 4px solid rgba(255,255,255,0.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: #000; font-weight: 700;
}
/*will need work eventually (maybe a camera button image? the hyperlink arrow shows up and ruins the look a little*/
.shutter-btn-pressed {
  width: 64px; height: 64px; border-radius: 50%;
  background: #ccc; border: 4px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: #555; font-weight: 700;
  transform: scale(0.92);
}
.camera-modes {
  display: flex; justify-content: center; gap: 20px;
  background: #000; padding: 6px 0 16px; flex-shrink: 0;
}
.cam-flash {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #fff;
  z-index: 50;
  animation: camflash 0.5s ease-out forwards;
  pointer-events: none;
}
@keyframes camflash {
  0%   { opacity: 1; }
  60%  { opacity: 0.6; }
  100% { opacity: 0; }
}

.screen-photos {
  background: #000;
  display: flex;
  flex-direction: column;
}
.photos-header {
  padding: 54px 16px 8px;
  display: flex; justify-content: space-between; align-items: center;
  flex-shrink: 0;
}
.photos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px; width: 100%; box-sizing: border-box;
}
/*controls the photo grid on the photos app. currently set to 3 wide*/

.photo-thumb {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  font-size: 28px; overflow: hidden; min-width: 0;
}
.photo-caption {
  font-size: 8px; color: rgba(255,255,255,0.55);
  text-align: center; padding: 2px; line-height: 1.2;
}
/*unused bit, only will appear if images don't fit properly in their individual containers*/


.yt-thumb img, .yt-thumb figure, .yt-thumb .thumb, .yt-thumb .thumbinner {
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  width: 100% !important;
}

.screen-twitter { background: #000; }
.twitter-header {
  position: sticky; top: 0;
  background: rgba(0,0,0,0.9);
  padding: 52px 16px 10px;
  border-bottom: 1px solid #2f2f2f;
  text-align: center;
  font-size: 20px; font-weight: 700; color: #fff;
  z-index: 10;
}
.tweet {
  padding: 10px 12px;
  border-bottom: 1px solid #1a1a1a;
  display: flex; gap: 8px;
}
.tweet-avi {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
}
.tweet-body { flex: 1; min-width: 0; text-align:left; }
.tweet-name { font-size: 12px; font-weight: 700; color: #fff; }
.tweet-handle { font-size: 10px; color: #536471; }
.tweet-text { font-size: 11px; color: #e7e9ea; margin-top: 3px; line-height: 1.4; text-align:left; }
.tweet-stats { font-size: 10px; color: #536471; margin-top: 5px; display: flex; gap: 12px; }

.screen-insta { background: #000; }
.insta-header {
  top: 0;
  background: rgba(0,0,0,0.92);
  padding: 50px 14px 8px;
  border-bottom: 1px solid #1a1a1a;
  display: flex; justify-content: space-between; align-items: center;
  z-index: 10;
}
.insta-wordmark {
  font-size: 18px; font-weight: 700; color: #fff;
  font-style: italic; font-family: Georgia, serif;
}
.insta-post { border-bottom: 1px solid #1a1a1a; }
.insta-post-header {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
}
.insta-avi {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  background: linear-gradient(135deg, #f09433, #dc2743, #bc1888);
}
.insta-username { font-size: 11px; font-weight: 700; color: #fff; }
.insta-location { font-size: 9px; color: #8e8e93; text-align:left; }
.insta-img {
  width: 100%; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 48px; overflow: hidden;
}
.insta-actions { padding: 6px 12px 2px; display: flex; gap: 12px; font-size: 16px; }
.insta-caption { padding: 2px 12px 8px; font-size: 10px; color: #e7e9ea; line-height: 1.4; text-align:left; }
.insta-bold { font-weight: 700; }

.screen-safari { background: #fff; }
.safari-bar-wrap {
  background: #f2f2f7;
  padding: 52px 10px 8px;
  border-bottom: 1px solid #c6c6c8;
  flex-shrink: 0;
}
.safari-url {
  background: #e5e5ea; border-radius: 10px;
  padding: 7px 12px; font-size: 11px; color: #3a3a3c; text-align: center;
}
.safari-body-inner {
  padding: 12px 14px;
}
.safari-headline { font-size: 15px; font-weight: 700; color: #000; margin-bottom: 4px; text-align:left; }
.safari-byline { font-size: 9px; color: #8e8e93; margin-bottom: 6px; text-align:left; }
.safari-copy { font-size: 11px; color: #1c1c1e; line-height: 1.6; text-align:left; }
.safari-ad {
  background: #f2f2f7; border: 1px solid #e5e5ea;
  border-radius: 8px; padding: 7px; margin: 8px 0;
  font-size: 9px; color: #8e8e93;
}
.safari-ad-badge {
  font-size: 7px; background: #007aff; color: #fff;
  border-radius: 3px; padding: 1px 3px;
}

.screen-siri {
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
.siri-spacer {
  flex: 1; display: flex; align-items: center;
  justify-content: center; width: 100%;
}
.siri-bubble {
  text-align: center; padding: 0 24px;
}
.siri-said { font-size: 12px; color: #8e8e93; margin-bottom: 10px; text-align:left; }
.siri-quote { font-size: 13px; color: #fff; line-height: 1.6; text-align:left; }
.siri-em { color: #bf5af2; font-style: italic; text-align:left; }
.siri-wave {
  width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, #5e5ce6 0%, #bf5af2 40%, #ff375f 70%, transparent 100%);
  margin-bottom: 24px; opacity: 0.85;
  animation: siripulse 2s ease-in-out infinite;
}
/*controls the glowy purple thing representing siri*/

@keyframes siripulse {
  0%,100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.06); opacity: 1; }
}
.siri-hint { font-size: 10px; color: #636366; }

.doom-btn {
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
  background: #2c2c2e;
  animation: doompress 0.6s ease-in-out infinite;
}
.doom-btn:nth-child(1) { animation-delay: 2.1s; }
.doom-btn:nth-child(2) { animation-delay: 0.6s; }
.doom-btn:nth-child(3) { animation-delay: 3.15s; }
.doom-btn:nth-child(4) { animation-delay: 0.95s; }
.doom-btn:nth-child(5) { animation-delay: 0.7s; }
.doom-btn:nth-child(6) { animation-delay: 1.1s; }
@keyframes doompress {
  0%,100% { background: #2c2c2e; color: #fff; }
  40%,60% { background: #ff3b30; color: #fff; }
}

.screen-settings { background: black; }
.settings-top { padding: 52px 16px 8px; }
.settings-h1 { color: #fff; font-size: 26px; font-weight: 700; }
.settings-search {
  background: #2c2c2e; border-radius: 10px;
  padding: 7px 12px; color: #8e8e93; font-size: 12px; margin-top: 8px;
}
.settings-group { margin: 14px 0 0; padding: 0 16px; }
.settings-grouplabel {
  font-size: 10px; color: #8e8e93;
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 4px; padding-left: 4px;
}
.settings-section { background: #2c2c2e; border-radius: 10px; overflow: hidden; }
.settings-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-bottom: 1px solid #3a3a3c;
}
.settings-row:last-child { border-bottom: none; }
.s-icon {
  width: 26px; height: 26px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
  flex-shrink: 0;
}
.s-label { flex: 1; font-size: 13px; color: #fff; }
.s-value { font-size: 11px; color: #8e8e93; }
.s-arrow { color: #636366; font-size: 11px; }
.s-toggle {
  width: 34px; height: 20px; border-radius: 10px;
  background: #34c759; position: relative; flex-shrink: 0;
}
.s-thumb {
  position: absolute; right: 2px; top: 2px;
  width: 16px; height: 16px; background: #fff; border-radius: 50%;
}
.settings-foot { height: 50px; }
/*do NOT mess with this, it will wreck every single app!!!!!!!!!!!!*/
.home-bar-wrap {
  flex-shrink: 0;
  display: flex; justify-content: center;
  padding: 6px 0 8px;
  z-index: 500;
}
.home-bar-wrap a {
  display: block;
  width: 90px; height: 5px;
  background: rgba(255,255,255,0.4);
  border-radius: 3px;
  text-decoration: none;
  font-size: 0; color: transparent; line-height: 5px; overflow: hidden;
}
.home-bar-wrap a::after { display: none !important; }
.home-bar-dark a { background: rgba(0,0,0,0.2); }
.cr-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  background: #1a1a2e;
  border-radius: 6px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
  position: relative;
}
.cr-play-badge {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  color: #fff;
}
.cr-episode-row {
  display: flex; gap: 10px;
  padding: 0 12px 12px;
}
.cr-episode-info { flex: 1; min-width: 0; }
.cr-episode-title { color: #fff; font-size: 12px; font-weight: 600; line-height: 1.3; }
.cr-episode-sub { color: #a0a0b0; font-size: 10px; margin-top: 2px; }
.cr-thumb-small { width: 120px; flex-shrink: 0; }
.bereal-img figure,
.bereal-img .thumb,
.bereal-img .thumbinner,
.bereal-img img {
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
/* --compass app arrow spinny thing animation */
@keyframes compassspin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.compass-needle {
  animation: compassspin 0.2s linear infinite;
  transform-origin: center center;
  display: inline-block;
}

@keyframes eq1 { 0%,100%{height:8px} 50%{height:28px} }
@keyframes eq2 { 0%,100%{height:20px} 50%{height:6px} }
@keyframes eq3 { 0%,100%{height:14px} 50%{height:32px} }
@keyframes eq4 { 0%,100%{height:24px} 50%{height:8px} }
@keyframes eq5 { 0%,100%{height:10px} 50%{height:26px} }
.gb-eq-bar { width:4px; border-radius:2px; background:#ff2d55; display:inline-block; vertical-align:bottom; margin:0 1px; }
.gb-eq-bar:nth-child(1) { animation:eq1 0.5s ease-in-out infinite; }
.gb-eq-bar:nth-child(2) { animation:eq2 0.4s ease-in-out infinite; }
.gb-eq-bar:nth-child(3) { animation:eq3 0.6s ease-in-out infinite; }
.gb-eq-bar:nth-child(4) { animation:eq4 0.35s ease-in-out infinite; }
.gb-eq-bar:nth-child(5) { animation:eq5 0.55s ease-in-out infinite; }
.gb-eq-bar:nth-child(6) { animation:eq1 0.45s ease-in-out infinite 0.1s; }
.gb-eq-bar:nth-child(7) { animation:eq3 0.5s ease-in-out infinite 0.2s; }
.gb-eq-bar:nth-child(8) { animation:eq2 0.6s ease-in-out infinite 0.15s; }

@keyframes cahslide {
  0%    { opacity:0; transform:translateY(20px); }
  5%    { opacity:1; transform:translateY(0); }
  33%   { opacity:1; transform:translateY(0); }
  38%   { opacity:0; transform:translateY(-20px); }
  100%  { opacity:0; transform:translateY(-20px); }
}
@keyframes cahpulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.01); }
}
.cah-answer {
  position:absolute;
  top:0; left:0; right:0;
  opacity:0;
  animation: cahslide 24s ease-in-out infinite;
}
.cah-answer:nth-child(1)  { animation-delay:  0s; }
.cah-answer:nth-child(2)  { animation-delay:  4s; }
.cah-answer:nth-child(3)  { animation-delay:  8s; }
.cah-answer:nth-child(4)  { animation-delay: 12s; }
.cah-answer:nth-child(5)  { animation-delay: 16s; }
.cah-answer:nth-child(6)  { animation-delay: 20s; }
.cah-prompt-card {
  animation: cahpulse 4s ease-in-out infinite;
}

@keyframes potatofly {
  0%   { top:45%; }
  8%   { top:30%; }
  16%  { top:42%; }
  24%  { top:26%; }
  32%  { top:38%; }
  40%  { top:22%; }
  48%  { top:35%; }
  56%  { top:48%; }
  64%  { top:32%; }
  70%  { top:55%; }
  76%  { top:62%; transform:rotate(90deg); }
  80%  { top:72%; transform:rotate(180deg); }
  83%  { top:72%; transform:rotate(180deg); opacity:1; }
  85%  { top:72%; opacity:0; }
  100% { top:72%; opacity:0; }
}

@keyframes pipescroll {
  0%   { left:110%; }
  70%  { left:20%; }
  76%  { left:18%; }
  100% { left:18%; }
}

@keyframes pipescroll2 {
  0%   { left:180%; }
  100% { left:18%; }
}

@keyframes groundscroll {
  0%   { background-position: 0 0; }
  76%  { background-position: -400px 0; }
  100% { background-position: -400px 0; }
}

@keyframes scorecount {
  0%,5%   { }
  10%  { transform:scale(1.2); }
  10.1%{ transform:scale(1); }
  20%  { transform:scale(1.2); }
  20.1%{ transform:scale(1); }
  30%  { transform:scale(1.2); }
  30.1%{ transform:scale(1); }
  40%  { transform:scale(1.2); }
  40.1%{ transform:scale(1); }
  50%  { transform:scale(1.2); }
  50.1%{ transform:scale(1); }
  60%  { transform:scale(1.2); }
  60.1%{ transform:scale(1); }
  70%  { transform:scale(1.2); }
  70.1%{ transform:scale(1); }
  75%,100%{ transform:scale(1); }
}

@keyframes gameovershow {
  0%,78%  { opacity:0; }
  82%     { opacity:1; }
  97%     { opacity:1; }
  100%    { opacity:0; }
}

@keyframes restartblink {
  0%,80%   { opacity:0; }
  85%      { opacity:1; }
  90%      { opacity:0; }
  95%      { opacity:1; }
  100%     { opacity:0; }
}

@keyframes skycrash {
  0%,70%  { background:#4ec0ca; }
  76%     { background:#c04e4e; }
  80%     { background:#4ec0ca; }
  100%    { background:#4ec0ca; }
}

@keyframes impactflash {
  0%,73%  { opacity:0; }
  74%     { opacity:0.8; }
  76%     { opacity:0; }
  100%    { opacity:0; }
}

.screen-home .thumbinner,
.screen-home figure,
.screen-home .thumb {
  margin: 0 !important;
  padding: 0 !important;
}
.screen-home img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* [[Category:Stylesheets]] */