.rotate-hint {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  padding: 14px 20px;
  background: linear-gradient(135deg, rgba(15,20,40,0.95), rgba(10,14,30,0.97));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255,181,71,0.25);
  color: #e8e0d4;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(12px, 2.5vw, 14px);
  text-align: center;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.4);
  animation: rotateHintIn 0.5s ease-out;
}
.rotate-hint.is-leaving {
  display: flex;
  animation: rotateHintOut 0.35s ease-in forwards;
}
@keyframes rotateHintIn {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes rotateHintOut {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(100%); opacity: 0; }
}
.rotate-hint svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  animation: rotatePhone 2.5s ease-in-out infinite;
}
@keyframes rotatePhone {
  0%, 100% { transform: rotate(0deg); }
  40% { transform: rotate(90deg); }
  60% { transform: rotate(90deg); }
}
.rotate-hint-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.rotate-hint-text strong {
  color: #ffb547;
  font-weight: 600;
  font-size: clamp(12px, 2.5vw, 14px);
}
.rotate-hint-text span {
  opacity: 0.7;
  font-size: clamp(10px, 2vw, 12px);
}
.rotate-hint-close {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
}
.rotate-hint-close:hover { background: rgba(255,255,255,0.2); color: #fff; }

@media (orientation: portrait) and (max-width: 1024px) and (pointer: coarse) {
  .rotate-hint.is-visible:not(.dismissed) { display: flex; }
}