/* ANGULUS oyuncağı (OYUNCAK-1) */
.toy-angulus { position: relative; width: 100%; height: 100%; min-height: 300px; overflow: hidden; color: var(--paper, #f4ead8); font-family: var(--font, system-ui, sans-serif); user-select: none; -webkit-user-select: none; }
.toy-angulus .ang-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: auto; }
.toy-angulus .ang-read { position: absolute; left: 0; right: 0; top: 4%; text-align: center; pointer-events: none; }
.toy-angulus .ang-deg { font-family: var(--mono, monospace); font-size: clamp(22px, 7cqmin, 44px); font-weight: 700; letter-spacing: .08em; text-shadow: 0 0 18px var(--world, #4fc3ff); }
.toy-angulus .ang-era { margin-top: 2px; font-size: clamp(12px, 3.4cqmin, 18px); letter-spacing: .16em; padding: 0 12px; text-transform: uppercase; color: var(--world, #4fc3ff); }
.toy-angulus { container-type: size; }
.toy-angulus.is-full .ang-era { color: var(--paper, #f4ead8); text-shadow: 0 0 14px var(--world, #4fc3ff); }
.toy-angulus .ang-handle { position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; cursor: grab; touch-action: none; outline: none; }
.toy-angulus .ang-handle::before { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: var(--ink, #0b0c10); border: 2px solid var(--world, #4fc3ff); box-shadow: 0 0 14px var(--world, #4fc3ff); }
.toy-angulus .ang-handle:focus-visible::before { border-color: var(--paper, #f4ead8); }
.toy-angulus .ang-handle:active { cursor: grabbing; }
.toy-angulus:not(.is-touched) .ang-handle::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1px solid var(--world, #4fc3ff); animation: ang-pulse 1.6s ease-out infinite; }
@keyframes ang-pulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.toy-angulus .ang-hint { position: absolute; left: 0; top: 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; padding: 4px 8px; border: 1px solid rgba(244,234,216,.25); border-radius: 3px; background: rgba(11,12,16,.7); white-space: nowrap; pointer-events: none; transition: opacity .4s; }
.toy-angulus.is-touched .ang-hint { opacity: 0; }
.toy-angulus .ang-note { position: absolute; right: 8px; bottom: 6px; font-size: 10px; letter-spacing: .06em; color: var(--muted, #9a968c); opacity: .8; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .toy-angulus .ang-handle::after { animation: none; } }